SlideDown/SlideUp Toggle 2 divs

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'); 
    }); 
});