Question

这是有问题的页面：http://yac-web.com/clients/dessert/我正在尝试设置鼠标移动时发生的效果，而不是鼠标时停止效果。由于某种原因，事件开始正常，但只是保持循环。我对JS并不是很熟悉，也无法找到有关mousemove事件的更多信息。感谢

$('html').mousemove(function () {
    $('html').toggleClass("change", 1000, "easeOutSine");
})

然后

html {
    background: rgba(191, 54, 245, 1);
}
.change {
    background: rgba(61, 98, 245, 1);
}

演示：Fiddle

Answer 1

基本问题是当移动鼠标时，您正在排队许多使用排队系统的切换类，因此即使在鼠标停止后动画仍将继续运行。

如果正在进行动画，解决方案不是添加更多切换，请尝试

var flag = false;
$('html').mousemove(function () {
    if (flag) {
        return;
    }
    flag = true;
    $('html').toggleClass("change1", 1000, "easeOutSine", function () {
        flag = false;
    });
})

演示：Fiddle

另一种方法是使用:animated选择器

var $html = $('html').mousemove(function () {
    if ($html.is(':animated')) {
        return;
    }
    $('html').toggleClass("change1", 1000, "easeOutSine");
})

演示：Fiddle

Answer 2

Arun P Johny的回答可能是实际解决问题的最佳答案，但它没有深入探究究竟为什么会发生这种问题。

这就是问题发生的原因：

每次鼠标位置更新（每秒几次，除非你有严重的延迟;我会假设更新之间的1/16秒），它会在动画列表的末尾添加一个新的动画去做。然后，当您停止移动鼠标时，它仍然有一些动画留在队列中，每个动画需要一整秒。它每隔1/16秒向动画时间添加一秒，即移动鼠标。因此，如果您将其移动一秒钟，则在您开始动画将停止后16秒。

这可以通过确保在旧的动画完成之前不添加新动画来解决。

即使在mousemovement停止后，Mousemove事件也会导致无限循环

2 个答案: