jQuery를 사용하여 한 div를 슬라이드하고 다른 divs를 위로 (슬라이딩 컨텐트 기반 탐색)

Question

피규어 내 요구에 맞는 쉬운 솔루션이나 솔루션을 찾지 못했기 때문에 여기에서 묻습니다. 내가 현재 내 사이트에서 겪고있는 문제는 슬라이드 애니메이션과 그 애니메이션의 타이밍을 다룰 때의 문제입니다.

사용자가 내 탐색 버튼 중 하나를 클릭하면 눌려진 버튼을 기반으로 콘텐츠를 슬라이드하는 패널이 있습니다. 다른 버튼을 클릭하면 해당 이전 div를 슬라이드하고 새 내용 패널을 아래로 슬라이드합니다.

내가 얻는 주된 문제는 애니메이션 타이밍 문제가 발생합니다. 다른 문제는 다른 이유로 슬라이딩하기 때문입니다.

내 모든 콘텐츠 패널은 서로 형제입니다 ... 여기 사용중인 jQuery가 있습니다 .... 어떤 제안이라도 대단히 감사하겠습니다!

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

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

그런 뭔가해야 다음 slideUp이 완료 될 때까지 slideDown가 발생하지 않도록

$('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

당신은 체인에 애니메이션 이벤트가 필요합니다.

Answer 2

다음은 작동중인 (?) 버전입니다. slideUP의 콜백을 사용하여 slideDown으로 전화합니다.

http://jsfiddle.net/yazYF/

편집 : 저스틴이 말한대로, 나는 단지와 함께 테스트하는 몇 가지 코드가 있습니다. :)

는

편집 2 : 지금 보이는 초기 창

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

EDIT 3로 : 처음에 아무것도 ...

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

Answer 3

나는 간단한을 만들었습니다 jQuery snippet입니다. 자바 스크립트 :

$(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(); 
    }); 
});