jquery - SlideDown/ SlideUp 切换 2 个 div

Question

我有 2 个 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');
    });
});