16

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

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

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

我无法为 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 几乎总是错误的高度......

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

然后在其上调用此函数

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 个单词，则不会发生回弹效果.. 但如果我输入多个带空格的单词，它会发生..

它几乎就像添加空格会导致高度搞砸一样。

4

8 回答 8

18

查看修复：
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最初显示您的，上面的代码稍后会隐藏它，因为我认为它将无法将正确的高度设置为 hidden div，尽管您可以尝试。祝你好运~

于 2011-05-10T01:43:11.353 回答
11

我在添加到 UL 的 LI 项目上遇到了滑动时回弹问题。它没有什么花哨的，所以我发现它令人费解（以前见过这个，但不记得我当时是如何修复它的）。

在我的情况下，我需要的唯一修复是在我的 LI 上指定一个宽度，并且能够顺利地 slideDown() 和 slideUp()。

例如

ul li { 宽度：100%; }

我从@arman-p 发布的一个链接中得到了这个提示（这表明向元素添加宽度可以解决这个问题，在我的例子中就是这样）。

于 2012-02-16T11:30:04.790 回答
4

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

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

编辑：使 jquery 对元素高度感到困惑的事情将导致回弹问题。

  1. 填充会导致它。将要向下滑动的填充内容放入没有填充的新父 div 中，而是向下滑动该父 div。
  2. 由于宽度而换行的内联文本会导致它。添加white-space: pre或white-space: nowrap解决它。
于 2014-06-23T13:45:18.173 回答
3

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

对我来说解决快速恢复问题的方法是将 css 宽度应用于您正在应用幻灯片功能的 div。

于 2013-02-20T22:21:50.853 回答
0

上述任何解决方案均无效。我通过将以下样式添加到我的容器来解决问题：

.clear:after {
   clear: both;
}

.clear:before,
.clear:after {
   display: table;
   content: "";
}
于 2013-03-31T23:05:14.430 回答
0

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

发生在我身上的一个例子

* {
     transition: .3s;
}

.dropdown {
     /* Fix - Remove Transition */
     transition: 0s;
}
于 2014-06-10T20:58:18.520 回答
0

添加 CSSclear: both为我解决了这个问题，但不知道为什么。

编辑：添加overflow: hidden给了我一个带有不需要的额外高度的空白容器。

于 2014-08-20T16:13:27.170 回答
0

我有一个数据库加载图像，这些图像都设置为相同的宽度，但其中一些具有不同的高度，并且遇到了问题。为我解决的问题只是在我的代码的 slideDown 部分周围设置了一个 setTimeout。

setTimeout(function(){$("#YOURDIV").slideDown("slow");}, 1);
于 2014-11-18T23:54:27.623 回答