jquery - 用 jQuery 折叠空 div 的优雅方法？

Question

假设我有一个包含以下内容的页面:

<div><p>Some content</p></div>
<div id="container"><p class="destroy">Some content that will go away.</p></div>
<div if="footer"><p>Some footer content.</p></div>

还有一些 jQuery:

jQuery(".destroy").click(function(){
    jQuery(this).fadeOut('slow');
})

一旦内容消失，如何避免页脚的“跳转”？我希望它能顺利滑入到位。

这是the problem 。这是how I would like it to work (但不指定高度)。

注意事项:

1. #container 的宽度和高度会有所不同，因为它的内容是动态的。
2. 解决方案必须简短但可读。
3. 包含 jQuery 和 jQuery UI。
4. 优雅的通用解决方案的奖励积分(检测所有空 div，并顺利折叠它们)。

Answer 1

你会“跳转”，因为 .fadeOut()动画完成时设置 display:none。

使用.fadeTo()相反，将不透明度淡化为 0。然后，您可以将其与 slideUp() 链接起来，以获得您指定的确切行为“我希望它如何工作”

jQuery('.destroy').click(function(){
    jQuery(this).fadeTo('slow', 0).slideUp();
})

布丁的证明:http://jsfiddle.net/qJFnc/4/

<小时/>

如果#container中没有其他内容，您可以对其调用slideUp():

jQuery('.destroy').click(function(){
    jQuery(this).fadeTo('slow', 0, function() {
        jQuery('#container').slideUp();
    });
})

更多布​​丁:http://jsfiddle.net/qJFnc/5/