jQuery slideDown快回问题 [英] jQuery slideDown Snap Back Issue

问题描述

尽管找不到解决方法，但我在网上也遇到了同样的问题.

I have the same problem that I am reading about all over the web, although I can't find the solution.

简单地说，当在我的DIV元素上使用slideDown()方法时，我得到了丑陋的回弹效果，即jQuery将DIV大小向下滑动得太远，然后又以丑陋的方式回弹到实际大小.

Simply put, when using the slideDown() method on my DIV elements, I get that ugly snap back effect where jQuery slides the DIV size down too far and then it snaps back to the actual size in an ugly way.

在网络上，iv尝试删除有问题的元素的所有边距和填充，但无济于事.

Looking over the web, iv tried removing all margins and padding from the offending elements, but it does nothing.

我无法为div设置静态尺寸，因为每个尺寸都会在页面加载时发生变化.一个加载，虽然他们不会改变. (新的div也使用ajax创建)

I cant set static sizes for the div's because each one will change on page load. One loaded though they wont change. (new divs are also created using ajax)

这里有一个样本DIV

Heres a sample 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}

有人可以在这里帮助我吗?我没有主意.. Iv尝试使用jQuery来计算DIV的高度，然后在调用slideDown()之前先使用CSS()强制设置高度，但是jQuery的高度几乎总是错误的...

Can anyone help me here? Im out of ideas .. Iv tried using jQuery to figure out the height of the DIV first then force the height using CSS() before calling the slideDown() but jQuery was almost always wrong about the height ...

响应div也使用display:none属性隐藏.

The response div is also hidden using the display:none property.

然后调用此函数

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个单词，则不会发生快速恢复效果..但是，如果我输入多个带有空格的单词，则会发生..

Edit I forgot to mention, that if the div only contains 1 word, the snap back effect doesnt happen .. but if I type multiple words with spaces, it happens..

几乎就像添加空格会导致高度变高.

Its almost like adding spaces causes the height to screw up.

推荐答案

看看修补程序:
1. 重新浏览了SlideDown动画跳转
2. 修复jQuery的slideDown()跳跃效果

Have a look on fixes:
1. SlideDown Animation Jump Revisited
2. Fixing jQuery's slideDown() jump effect

在jQuery网站上也记录了相同的故障(已修复): /a>

Also that same glitch documented (with fix) on jQuery website: http://docs.jquery.com/Tutorials:Getting_Around_The_Minimum_Height_Glitch

并尝试在代码之前添加以下代码(在文档加载时):

And try to add following code before your code (on document onload):

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

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

This way you will set height explicitly, and be sure to display your div initially, the above code will hide it later, because I think it will fail to set right height to hidden div, though you can try. Good Luck~

这篇关于jQuery slideDown快回问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！