Question

我遇到的问题与我在网上阅读的内容相同，但我找不到解决方案。

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

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

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

下载样本DIV

<div class="response hidden new">  
<div class="right"><span class="responseTime">10:28:10 AM</span></div>  
<span class="responseUser">Someone</span><br> 
<span class="responseMessage">sdgs sdgh</span>
</div>

和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 Animation Jump Revisited
2. Fixing jQuery's slideDown() jump effect

同样的故障也记录在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（）。

e.g。

ul li {width：100％; }

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

Answer 3

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

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

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

填充会导致它。放置要滑动的填充内容在没有填充的新父div中，然后滑动它父母下来。
由于宽度而包装的内联文本将导致它。添加white-space: pre或white-space: nowrap即可解决问题。

Answer 4

我也得到了那种丑陋的弹回效果。

为我修复回弹问题的原因是将css宽度应用于要应用滑动功能的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);

jQuery slideDown Snap Back Issue

8 个答案: