jQueryを使用して1つのdivをスライドさせ、他の表示divsをスライドさせる（コンテンツベースのナビゲーションをスライドさせる）

Question

フィギュアここでは、私のニーズに合った簡単な解決策や解決策が見つからないようです。私が現時点で私のサイトで抱えている問題は、スライドアニメーションとそのアニメーションのタイミングを扱うときです。

ユーザーがナビゲーションボタンの1つをクリックすると、押されたボタンに基づいてコンテンツをスライドさせるパネルがあります。別のボタンをクリックすると、その1つ前のdivを元に戻し、新しいコンテンツパネルをスライドさせます。

私が得ている主な問題は、他のものが何らかの理由で他のものが滑り始めるので、アニメーションタイミングの問題が発生することです。

私のすべてのコンテンツパネルはお互いに兄弟です...これは私が使用しているjQueryです。どんな提案も大歓迎です！

$('a.navBtn').click(function(){ 
    var divName = this.name; 
    $.when(function(){ 
     $("#"+divName).siblings().filter(":visible").slideUp("slow"); 
    }).then(function(){ 
     $("#"+divName).slideDown("slow"); 
    }) 
}); 

<div id="services"> 
        <div class="noise_overlay"> 
         <div id="contact"><a href="#" class="navBtn" name="contactContent"><img src="i/contact.png" /></a></div> 
         <div id="linkedin"><a href="#" class="navBtn" name="linkedinContent"><img src="i/linkedin.png" /></a></div> 
         <div id="facebook"><a href="#" class="navBtn" name="facebookContent"><img src="i/facebook.png" /></a></div> 
         <div id="twitter"><a href="#" class="navBtn" name="twitterContent"><img src="i/twitter.png" /></a></div> 
         <div id="flickr"><a href="#" class="navBtn" name="flickrContent"><img src="i/flickr.png" /></a></div> 
        </div> 
       </div> 

<div id="serviceContent"> 
      <div id="contactContent" class="contentPane mpHidden"> 
       <div class="noise_overlay_300"> 
        <div id="contactData"> 
         <span>contact</span> 
        </div> 
       </div> 
       <div class="contentFooter"></div> 
      </div> 
      <div id="linkedinContent" class="contentPane mpHidden"> 
       <div class="noise_overlay_300"> 
        <div id="linkedinData" class="mpCenter"> 

        </div> 
       </div> 
       <div class="contentFooter"><span></span></div> 
      </div> 
      <div id="facebookContent" class="contentPane mpHidden"> 
       <div class="noise_overlay_300"> 
        <div id="facebookData" class="mpCenter"> 
         <span>facebook</span> 
        </div> 
       </div> 
       <div class="contentFooter"><span></span></div> 
      </div> 
      <div id="twitterContent" class="contentPane mpHidden"> 
       <div class="noise_overlay_300"> 
        <div id="twitterData" class="mpCenter"> 
         <span>twitter</span> 
        </div> 
       </div> 
       <div class="contentFooter"><span></span></div> 
      </div> 
      <div id="flickrContent" class="contentPane mpHidden"> 
       <div class="noise_overlay_300"> 
        <div id="flickrData" class="mpCenter"> 
         <span>flickr</span> 
        </div> 
       </div> 
       <div class="contentFooter"><span></span></div> 
      </div> 
     </div> 

Answer 1

slideUpが完了するまでslideDownが起こらないようにするには、チェーンにアニメーションイベントを必要とする：

http://api.jquery.com/slideUp/

$("#"+divName).siblings().filter(":visible").slideUp("slow", function() { 
    $("#"+divName).slideDown("slow"); 
}); 

をそのようなものであるべき。

Answer 2

実用的な（？）バージョンです。私はslideUPのコールバックを使用してslideDownに電話します。

http://jsfiddle.net/yazYF/

EDIT：ジャスティンが言ったと同じように、私はちょうどにテストするためにいくつかのコードを持っています。 :)

EDIT 2：今すぐ初期ペイン見える

http://jsfiddle.net/yazYF/1/

EDIT 3で：最初は何も...

http://jsfiddle.net/yazYF/2/

Answer 3

私はシンプルに作られていますjQuery snippet javascript：

$(function() { 
    $('a.navBtn').click(function(e) { 
     var pane = $(this).attr('name'), 
      switchPanes = function(name) { 
       if($('.contentPane:visible').attr('id') === name){ 
        return; 
       } 
       if($('.contentPane:visible').length > 0){ 
        $('.contentPane:visible').slideUp('fast', function() { 
         $('#' + name).slideDown('medium'); 
        });      
       } else { 
        $('#' + name).slideDown('medium');      
       } 
      }; 

     switchPanes(pane); 
     e.preventDefault(); 
    }); 
});