jQuery动画回调在Firefox中，有时在Chrome中发射两次

Question

我有以下代码：

$logo.css({
    top : '800px'
}).animate({
    top : '200px'
}, 2000, function() {
    $text.animate({
        height : '800px'
    }, 2000, function() {
        console.log("this fires twice in firefox, and sometimes in chrome too");
    });
    console.log("this fires twice in firefox, and sometimes in chrome too");
});

在IE中 - 就像我想要的那样，它一直在触发两个回调函数。

在Firefox中 - 它始终两次触发两个回调功能。

在Chrome中 - 有时是发射功能一次，有时是两次。

问题 - 如何修复它，以使两个回调函数仅调用一次？

Answer 1

在每个.animate()

之前添加.stop(true)

如果这无济于事，请使用.stop(true,true)进行。

$logo.css({
    top : '800px'
}).stop(true).animate({
    top : '200px'
}, 2000, function() {
    $text.stop(true).animate({
        height : '800px'
    }, 2000, function() {
        console.log("this fires twice in firefox, and sometimes in chrome too");
    });
    console.log("this fires twice in firefox, and sometimes in chrome too");
});