jQuery slideDown Snap Back Issue

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动画跳跃再访
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上指定一个宽度,并能够平滑地slideDown()和slideUp().

例如

ul li {宽度:100%; }

我从@ arman-p发布的一个链接中得到了这个提示(建议在元素中添加一个宽度可以解决这个问题,就像我的情况一样).