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

一旦内容消失,如何避免页脚的"跳跃"？我希望它顺利地滑入到位.

这是问题所在.这是我希望它如何工作(但没有指定高度).

注意事项:

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/