jQuery中动画不流畅的问题

Question

我已经多次这样做而没有问题，但出现了问题，在这里。下滑将开始正常工作（1/3），然后突然抽搐并完成动画。向上滑动正常工作。对于slideDown()、slideToggle和.animate()都是如此。 奇怪的是，如果我在动画函数中切换不透明度，它就不会抽搐，但我的文本会短暂地改变颜色。

HTML:

<h2>Phthalate Free: </h2><div class="yamikowebsToggler">
    <p>
    Dibutyl Phthalate is linked to cancer and is present in nail polish, perfume, soft plastics and skin care products.
    </p></div>

CSS：我在其他地方阅读到，边距可能会引起不流畅的情况，但这并没有帮助解决问题。

    h2{color:#76DEFC; margin:0px;}
    .yamikowebsToggler{margin:0px;}
    p{margin:0px; color;#000000;}

JQUERY:

$(document).ready(function(){
    $(".yamikowebsToggler").fadeOut(0);
    $("h2").click(function()
    {
        $(this).next(".yamikowebsToggler").stop(true, true).animate(
        { height: 'toggle' }, 
        {
            duration: 1000,
        });
    })
});

- user654994

---

我没有看到问题：http://jsfiddle.net/azjUT/ 哦——刚刚注意到你的链接，那里有一个问题。我认为这可能是与其他CSS相交的问题，因为当仅使用此代码时没有任何问题。 - tvanfosson

Answer 1

我找到了解决方案。这与我的代码无关，而是jquery中的一个bug。如果继承了高度，jquery很难获取其高度，因为在获取高度时元素是隐藏的。当元素被隐藏时，它们会受到css属性的影响。

position: absolute;
visibility: hidden;

要解决这个问题，您需要在动画中指定高度，但在我的情况下，这是不可行的，因为有许多元素被切换。另一个选择是将高度设置为元素。我个人在jQuery中添加了一条注释，并且在行内完成了所有操作，只需简单地添加即可。

style="height: <height in px>;"

切换元素。

- user654994

---

你的意思是 visibility:hidden 吗？ - Asaf

Answer 2

当我尝试将一个区块从100%的宽度动画到0%时，遇到了类似的问题。

问题在于，在动画开始时，该区块在某些情况下会变得比100%更宽。

无论如何，我找到了解决方法：在特定的区块的CSS样式中添加max-width: 100%;。

我想发表这篇文章，因为我之前在这里寻求解决方案的时候也遇到了类似问题。 :)

- diggersworld

Answer 3

你尝试过增加你的{duration: ...}吗？此外，你可以直接使用内置的jQuery函数.slideToggle()。

- mattsven

---

感谢您的回答，tvanfosson。不幸的是，即使我禁用了所有外部CSS，问题仍然存在。motionman95完全阅读了说明。使用slideToggle和slideDown时问题相同，持续时间对问题没有影响。 - user654994

Answer 4

我知道这个被标记为答案了，但是我想就此问题提供一个更新。

相应的问题票在这里：http://bugs.jquery.com/ticket/4541

然而，它已经被核心开发人员关闭，似乎除非有没有性能缺陷的补丁，否则不会修复。

与此同时，如果你仍然希望使用jQuery来实现这一点，你可以设置你试图slideUp或slideDown的元素的高度或宽度。它可以不是“像素”单位，也可以是百分比。

- garyc40