SlideDown/SlideUp 두 div 전환

Question

두 개의 div가 있는데 하나는 보이지 않습니다. 링크를 클릭하여 가시성을 전환하고 싶지만 두 번째 전환하려면 첫 번째 div가 표시되지 않습니다.

HTML :

<div class="search-extra"> 
    <a href="#" id="toggle-to-advanced">Toggle to red</a> 
</div> 

<div class="search-advanced"> 
    <a href="#" id="toggle-to-normal">Toggle to black</a> 
</div>​ 

CSS :

.search-advanced{display:none;} 

jQuery를 :

jQuery('#toggle-to-normal').click(function(e){ 
    e.preventDefault(); 
    jQuery('.search-advanced').slideUp('normal').queue(function(){ 
     jQuery('.search-extra').slideDown('normal'); 
    }); 
}); 

jQuery('#toggle-to-advanced').click(function(e){ 
    e.preventDefault(); 
    jQuery('.search-extra').slideUp('normal').queue(function(){ 
     jQuery('.search-advanced').slideDown('normal'); 
    }); 
});​ 

데모 :

http://jsfiddle.net/rekQ9/

Answer 1

대신 queue, 당신은 그것이 작동되도록하는 슬라이드에 콜백 함수를 사용할 수 있습니다

http://jsfiddle.net/rekQ9/2/

Answer 2

jQuery('#toggle-to-normal').click(function(e){ 
    e.preventDefault(); 
    jQuery('.search-advanced').slideUp('normal',function(){ 
     jQuery('.search-extra').slideDown('normal'); 
    }); 
}); 

jQuery('#toggle-to-advanced').click(function(e){ 
    e.preventDefault(); 
    jQuery('.search-extra').slideUp('normal', function(){ 
     jQuery('.search-advanced').slideDown('normal'); 
    }); 
});