jQuery slideDown Snap Back Issue

我有同样的问题，我正在阅读有关整个网络，虽然我找不到解决方案。

简单地说，当在我的DIV元素上使用slideDown（）方法时，我得到了丑陋的快照效果，其中jQuery将DIV大小向下滑动太远，然后以丑陋的方式快速回到实际大小。

查看网页，我试图从有问题的元素中删除所有边距和填充，但它什么也没做。

我不能为div设置静态大小，因为每个都会在页面加载时改变。 一载，虽然他们不会改变。 （新的div也使用ajax创建）

下面是样本DIV

 
10:28:10 AM
 Someone
 sdgs sdgh  

和CSS

 div.response { line-height: 20px; border-bottom: 1px dotted #546268; } .responseMessage {display: block} 

有人能帮我一下吗？ 我没有想法..我尝试使用jQuery首先弄清楚DIV的高度，然后在调用slideDown（）之前使用CSS（）强制高度，但jQuery几乎总是错误的高度…

使用display：none属性也隐藏响应div。

然后在其上调用此函数

 function quickResponse(time, user, message, epoch) { $('.latestStar').remove(); addResponse(time, user, message, epoch); $('.new').slideDown(500).removeClass('hidden'); $('html, body').animate({ scrollTop: '0px'}, 1000, function() { }); } 

编辑我忘了提，如果div只包含1个单词，则回弹效果不会发生..但如果我用空格键入多个单词，则会发生..

它几乎像添加空间会导致高度搞砸。

Answer 1

看看修复：
1. 重新访问SlideDown动画跳转
2. 修复jQuery的slideDown（）跳转效果

在jQuery网站上也记录了相同的故障（有修复）： http ： //docs.jquery.com/Tutorials ： Getting_Around_The_Minimum_Height_Glitch

并尝试在代码之前添加以下代码（在文档onload上）：

 $('.new').css('height', $('.new').height()); $('.new').hide(); 

这样你就可以明确地设置高度，并确保最初显示你的div ，上面的代码将在以后隐藏它，因为我认为它将无法设置正确的高度到隐藏的div ，尽管你可以尝试。 祝你好运〜

Answer 2

我正在添加到UL的LI项目上有快速向下滑动的问题。 没有什么花哨的，所以我发现它令人费解（之前见过这个，但不记得我当时是怎么修的）。

在我的情况下，我需要的唯一修复是在我的LI上指定宽度并且能够平滑地滑动（）和slideUp（）。

例如

ul li {宽度：100％; }

我从@ arman-p发布的链接之一得到了这个提示（建议在元素中添加一个宽度可以解决这个问题，这在我的情况下做了）。

Answer 3

添加css overflow: hidden到要向下滑动的元素。

出于某种原因，这修复了我的快照问题。

编辑：混淆jquery关于元素高度的事情将导致快照问题。

1. 填充会导致它。 在没有填充的情况下，将要填充的内容放在新的父div中，然后将父div下拉。
2. 由于宽度而包装的内联文本将导致它。 添加white-space: pre或white-space: nowrap来解决它。

Answer 4

我也得到了丑陋的快照效果。

为我修复回弹问题的原因是将css宽度应用于要应用滑动function的div。

Answer 5

上述任何解决方案都不起作用。 我通过向容器添加以下样式来解决问题：

 .clear:after { clear: both; } .clear:before, .clear:after { display: table; content: ""; } 

Answer 6

另一件可能导致这种情况的事情是，如果元素本身具有“过渡”样式。

发生在我身上的一个例子

 * { transition: .3s; } .dropdown { /* Fix - Remove Transition */ transition: 0s; } 

Answer 7

添加CSS clear: both解决了我的问题，不知道为什么。

编辑：添加overflow: hidden给了我一个空白容器，其中包含不需要的额外高度。

Answer 8

我有一个数据库加载图像，所有图像都设置为相同的宽度，但其中一些有不同的高度，并有这个问题。 为我修复的只是在我的代码的slideDown部分周围抛出一个setTimeout。

 setTimeout(function(){$("#YOURDIV").slideDown("slow");}, 1);