时间戳

首页 > 解决方案 > Jquery 动画工作不一致

jquery - Jquery 动画工作不一致

问题描述

我正在开发一个简单的游戏项目并使用 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/

标签： jqueryperformancejquery-animateeasingjquery-easing

解决方案

推荐阅读