我正在研究一个简单的游戏项目,并使用jQuery制作一些动画。
由于某些原因,动画的平滑度和一致性与网页的“活跃”程度相关。如果我让鼠标在网页上保持闲置状态,则动画不稳定,无响应,并且第二个动画通常无法播放。
此外,如果我在页面上保持非常活跃的鼠标,动画将非常流畅地播放。
这里有我所看到的效果的简短视频相册
以下代码是我用来使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扩展解决了这个问题。效果很好。