jQuery动画工作不一致

时间:2018-10-19 16:48:38

标签: jquery performance jquery-animate easing jquery-easing

我正在研究一个简单的游戏项目,并使用jQuery制作一些动画。

由于某些原因,动画的平滑度和一致性与网页的“活跃”程度相关。如果我让鼠标在网页上保持闲置状态,则动画不稳定,无响应,并且第二个动画通常无法播放。

此外,如果我在页面上保持非常活跃的鼠标,动画将非常流畅地播放。

这里有我所看到的效果的简短视频相册

https://imgur.com/a/K1bW308

以下代码是我用来使div动画化的代码:

window.setTimeout(function() {
    $("#blue_button").animate({"margin-left" : "100px"}, 5000, 'easeOutElastic', function() {
        // enable mouse events
        $("#blue_button").css({"pointer-events" : "all"});
        // bring in the text desription
        var rect = $("#blue_button")[0].getBoundingClientRect();
        $("#text_div").animate({"margin-left" : rect.right + 80 + "px"}, 700, 'easeOutQuint');
    });
}, 6000);

我正在使用jQuery 3.3.1和jQuery Easing 1.3(具有自定义缓动功能的插件)

使用默认的jQuery缓动时,我仍然看到播放问题。

我在Windows 10上使用Chrome 69.0.3497.100,在使用普通Microsoft Edge时也看到了相同的行为。同样,在将我的笔​​记本电脑与相同的Chrome / Windows一起使用时。

谢谢

编辑:

我已经通过使用过渡jquery扩展解决了这个问题。效果很好。

http://ricostacruz.com/jquery.transit/

0 个答案:

没有答案