用jQuery折叠空div的优雅方法？
假设我有一个具有以下内容的页面：
<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');
})一旦内容消失，如何避免页脚的“跳转”？我希望它能顺利地滑到适当的位置。
这是问题所在。这里是我希望它能发挥作用 (但没有指定高度)。
注意事项：
- #容器的宽度和高度会有所不同，因为它的内容是动态的。
- 解决方案必须是最低限度的，但也是可读的。
- jQuery和jQuery UI包括在内。
- 一个优雅的通用解决方案的额外积分(检测所有空的div，并平稳地折叠它们)。
回答 4
Stack Overflow用户
发布于 2011-09-15 17:33:38
您会得到“跳转”，因为当动画完成时，.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/
Stack Overflow用户
发布于 2011-09-15 17:26:01
将其动画为零，然后删除回调。
演示：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();
})
})Stack Overflow用户
发布于 2011-09-15 17:26:01
尝尝这个。这将获得动态高度并将其设置为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();
})
})https://stackoverflow.com/questions/7434960
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号