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

【问题标题】：Elegant way to collapse an empty div with jQuery?用 jQuery 折叠空 div 的优雅方式？
【发布时间】：2011-09-15 17:23:17
【问题描述】：

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

<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，并顺利折叠它们）。

【问题讨论】：

为什么要淡出.destroy 内容而不是#container？ #container还有其他内容吗？另外，.slideUp() 而不是 .fadeOut()?

标签： jquery jquery-animate

【解决方案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/

【讨论】：

我给你道具让我到达那里的 90%... 我把它改成这样：jQuery('.destroy').click(function(){ jQuery(this).fadeTo('slow', 0).slideUp(function(){ jQuery(this).remove()}); })

【解决方案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();
    })
})

【讨论】：

恐怕我喜欢我的应用程序的淡入淡出效果，否则这将是一个很好的解决方案。
获得相同效果的更简单方法是使用.slideUp()。

【解决方案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();
    })
})

【讨论】：

【解决方案4】：

这个怎么样？

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

http://jsfiddle.net/R779K/

animate 函数有一个在主动画完成后运行的回调。你可以在那里拥有任何你想要的东西。

Opacity 只设置了不透明度的适当性，让 div 的 display:block 保持不变，所以当您淡出时，它看起来好像 #content 消失了，并且页脚正在慢慢占据空白空间。

【讨论】：