jQuery 中动画不稳定的问题

发布于 2024-10-25 04:33:58 字数 1001 浏览 7 评论 0原文

我已经这样做了很多次，没有任何问题，但由于某种原因，这是一个问题这里。向下滑动将开始正常工作 (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,
        });
    })
});

原文

Ive done this a number of times with no problem but for some reason it is a problem on Here. The slide down will begin to work (1/3) normally and than all of a suddenly jerk and finish the animation. slideing up works fine. this is the case for slideDown(), slideToggle and .animate()
strangely if i also toggle opacity in the animate function it does not jerk but my text will briefly change color.

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: i read else were that margins can cause the jerkiness but this isnt helping

    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,
        });
    })
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

九命猫 2024-11-01 04:34:02

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

回复收藏 0 原文

月隐月明月朦胧 2024-11-01 04:34:02

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

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

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

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

回复收藏 0 原文

黑色毁心梦 2024-11-01 04:34:00

我找到了解决方案。它与我的代码无关，而是 jquery 中的一个错误。如果 jquery 是继承的，则很难获取高度，因为当它获取高度时，元素被隐藏。当元素隐藏时，它们会使用 css 属性进行处理，

position: absolute;
visibility: hidden;

以解决此问题，您需要在动画中指定高度，这在我的情况下是不可行的，因为我有很多切换的动画。另一种方法是设置元素的高度。即可完成所有操作。

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

我个人在我的 jQuery 中添加了一个关于它的注释，并且只需添加到正在切换的元素

I found the solution. it had nothing to do with my code but a bug in jquery. jquery has trouble getting the height if it is inherited because when it is getting the height the element is hidden. when elements are hidden they are treated with css properties of

position: absolute;
visibility: hidden;

to fix this you need to specify the height in either the animation which is not doable in my case since i have many that are toggled. the alternative is to set the height to the elements. i personally added a note in my jQuery about it and did it all in line simply adding