jQuery中的生涩动画问题

Posted 2023-05-08

【中文标题】jQuery中的生涩动画问题

【英文标题】：Problem with jerky animation in jQuery

【发布时间】：2011-07-18 23:44:25

【问题描述】：

我已经多次这样做了，但由于某种原因，这是Here 的问题。向下滑动将开始正常工作（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：我读到的其他内容是边距会导致抖动，但这无济于事

    h2color:#76DEFC; margin:0px;
    .yamikowebsTogglermargin:0px;
    pmargin:0px; color;#000000;

查询：

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

【问题讨论】：

我没有看到问题：jsfiddle.net/azjUT 啊——刚刚注意到你的链接，那里有问题。我认为它一定是与其他一些 CSS 的交集，因为单独使用这段代码没有任何问题。

【参考方案1】：

我找到了解决方案。它与我的代码无关，而是 jquery 中的一个错误。如果它是继承的，jquery 很难获得高度，因为当它获得高度时，元素是隐藏的。当元素被隐藏时，它们会被

的 css 属性处理

position: absolute;
visibility: hidden;

要解决此问题，您需要在任一动画中指定高度，这在我的情况下是不可行的，因为我有很多已切换。另一种方法是设置元素的高度。我个人在我的 jQuery 中添加了一个关于它的注释，并在一行中添加了所有内容

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

到被切换的元素。

【讨论】：

你的意思是可见性：隐藏？

【参考方案2】：

在将分割从 100% 缩小到 0% 宽度时，我遇到了类似的问题。

发生的情况是，在动画开始时，由于某种原因，该部门变得更宽，达到了 110%。

无论如何我发现解决方案是在特定分区的CSS样式中添加max-width: 100%;。

当我来到这里寻找解决此问题的方法时，我只是想我会在这里发布。 :)

【参考方案3】：

您是否尝试过增加您的duration: ...？此外，您可以只使用内置的 jQuery 函数.slideToggle()。

【讨论】：

感谢您的回答 tvanfosson。不幸的是，我所有的外部 css 都被禁用了，问题仍然存在。 motionman95 完整地阅读了描述。 slideToggle 和 slideDown 的问题是一样的。持续时间对问题没有任何改变。

【参考方案4】：

我知道这已标记为答案，但想提供有关此问题的更新。

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

但它已被核心开发人员关闭，并且似乎不会修复，除非有没有性能缺陷的补丁。

同时，如果您仍希望使用 jQuery 来执行此操作，您可以设置要上滑或下滑的元素的高度或宽度。它不必是“像素”单位，也可以是百分比。