jquery fade and toggle

Question

私は上部にメインh1、下部に2つのパネルを持つ単純なWebページを持っています。 パネル1が表示され、パネル2は、クラス.hideを有する。私が何をしたいか
は次のとおりです。
私はbodyまたはh1クリック - パネルを1フェードアウトすべきであるとパネル2は同時にフェードインする必要があります。
と私は唯一h1をクリック第二パネルため - パネル2がフェードアウトすべきとパネル1は再びフェードインする必要があります。

は今のコードは：私は身体をクリックしたときには、2成功しパネルをもたらし、そしてパネルに2私はそれが1成功しパネルに戻って私を取るh1をクリックしたとき。私はh1のパネル1をクリックしたとき しかし、それは、フェードアウト秒間パネル2を表示し、再度フェードインと第二パネルは表示されません。私は何をすべきか？

$(function() { 
    $('body,h1').on('click',function(){ 
     $('div.panel-1').fadeOut(1000); 
     $('div.panel-2').fadeIn(1000).removeClass('hide'); 
     return false; 
     }); 
}); 


$(function() { 
    $('h1').on('click',function(){ 
     $('div.panel-2').fadeOut(1000); 
     $('div.panel-1').fadeIn(1000); 
    }); 
}); 

Answer 1

あなたはH1に2つのイベントリスナーを添付しているようです。おそらく、パネルの可視性を切り替えるリスナを1つだけアタッチする必要があります（表示されているものを検出し、それに応じて切り替えます）。あなたのコードでは、リスナーは順番に呼び出されます。また、彼は彼が "隠す"クラスを削除しますが、どこにも追加しません。

Answer 2

シンプルな何かのためだけのアイデア

$(function() { 
    $('body').on('click',function (e){ 
     if ($('div.panel-1').is(':visible') && e.target.tagName != 'h1'){ 
      $('div.panel-1').fadeOut(1000, function() { 
       $('div.panel-2').fadeIn(1000).removeClass('hide'); 
       $(this).addClass('hide'); 
      }); 
     } 
     return false; 
    }); 

    $('h1').on('click',function(){ 
     if ($('div.panel-1').is(':visible')){ 
      $('div.panel-1').fadeOut(1000, function() { 
       $('div.panel-2').fadeIn(1000).removeClass('hide'); 
       $(this).addClass('hide'); 
      }); 
     }else{ 
      $('div.panel-2').fadeOut(1000, function() { 
       $('div.panel-1').fadeIn(1000).removeClass('hide');; 
       $(this).addClass('hide'); 
      }); 
     } 
     return false; 
    }); 
}); 

が、これらのものは、多くのクリックや予期しない動作にめちゃくちゃを取得する傾向があります。

$(function() { 
    $('body, h1').on('click',function(){ 
     $('div.panel-1, div.panel-2').toggleClass('hide').fadeToggle(1000); 
     return false; 
    }); 
}); 

Answer 3

demo jsBin

あなたが使用する必要がありevent.stopPropagation()

：クリックイベントのために
とは、簡単のために単一のクラスを使用します

$(function() { 
    $('body, h1').on('click',function(e){ 
     e.stopPropagation(); 
     $('.panel').fadeToggle(); 
    }); 
}); 

Answer 4

は、だからここに最終版だ、それが動作します。 htmlには、panel-1とpanel-2.という名前のidを持つ2つのdivがあります。パネル-2に.hide（display：none;）のクラスを追加します。 誰かが欲しいのは、クリックしたボディやh1 - パネル1がフェードアウトし、パネル2が同時にフェードインする必要がある場合です。 2番目のパネルの場合、h1のみをクリックするとパネル2がフェードアウトし、パネル1が再びフェードインするはずです。

$（関数（）{

$('h1').on('click',function(){ 
    if ($('div.panel-2').hasClass('hide')) { 
    $('div.panel-1').fadeOut(400).addClass('hide',function() { 
    $('div.panel-2').removeClass('hide').fadeIn(400); 
    return false; 
    }); 
    } 

    else if ($('div.panel-1').hasClass('hide')) { 
    $('div.panel-2').addClass('hide').fadeOut(400,function() { 
    $('div.panel-1').fadeIn(400).removeClass('hide'); 
    }); 
    return false; 
    } 

    }); 

$('body').on('click',function(){ 
    $('div.panel-1').addClass('hide').fadeOut(400,function() { 
     $('div.panel-2').fadeIn(400).removeClass('hide'); 
     return false; 
    }); 
    }); 

}）。