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