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（但没有指定高度）。

注意事项：

#container的宽度和高度会有所不同，因为它的内容是动态的。
解决方案必须简洁但可读。
包含jQuery和jQuery UI。
优雅的通用解决方案的奖励积分（检测所有空的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/

Answer 2

将其设置为零，然后在回调中删除

演示：http://jsfiddle.net/qJFnc/2/

jQuery('.destroy').click(function(){
    jQuery(this).animate({height : 0}, function() {
        $(this).remove();
    })
})

------------------编辑：

要使用没有CSS高度的淡入淡出效果，您需要使用fadeTo（），因为它不会像fadeOut那样删除元素。然后在该幻灯片的回调元素上。

演示：http://jsfiddle.net/qJFnc/10/

更新资料来源：

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

Answer 3

试试这个。这将获得动态高度并将其设置为css。

http://jsfiddle.net/kQugU/2/

jQuery('.destroy').click(function(){
    jQuery('#container').css("height", jQuery('#container').height());
    jQuery(this).fadeOut('slow',function(){
        jQuery('#container').slideUp();
    })
})

Answer 4

这是怎么回事？

$(".destroy").click(function(){
    $("#container").animate({opacity : 0},400,function(){
        $(this).slideUp(100);
    });
})

http://jsfiddle.net/R779K/

animate函数具有在主动画完成后运行的回调。你可以随心所欲。

不透明度仅设置了不透明度的适当性，使得显示：div保持完整，所以当你淡出时，它看起来好像#content消失了，并且页脚正在慢慢占据空白区域。

用jQuery折叠空div的优雅方式？

4 个答案: