jQuery stop() 和 animate() 函数问题

Question

这是我的fiddle：http://jsfiddle.net/poxgawf4/3/。它确实有效，如果您将鼠标保持在 div 上并等待执行动画，但是如果您快速移动鼠标，它会完全搞砸一切。你知道为什么吗？这是 jQuery 脚本：

$(".inno-bg").mouseenter(function () {

            $(this).css('background-image', 'none');
            $(this).css("background-color", "#1A6397");
            $(this).stop(true, true).animate({
                width: "320px"
            },{
                //easing: 'swing',
                duration: 500,
                complete: function(){
                       $(this).find("h2").stop(true, true).animate({
                            'marginTop': "-=60px"
                       });
                       $(this).find("p").fadeIn(1000);
                }
            });


        });
        $(".inno-bg").mouseleave(function () {
             $(this).find("h2").stop(true, true).animate({
                'marginTop': "+=60px"
            }, 200);
            imageUrl = "http://localhost/newsvro/images/pages/company/img_valori_innovation.png";
            $(this).css('background-image', 'url(' + imageUrl + ')');
            $(this).stop(true, false).animate({
                width: "160px"
            });
            $(this).find("p").hide();

        });

Answer 1

我现在看到了更新后的 fiddle。问题在于，在第一个事件 (mouseenter) 中，您在第一个动画完成时启动第二个动画 (h2)。但是在回来的路上，无论如何你都会开始动画。这意味着如果您没有完全完成第一个动画，则 h2 还没有向上移动，因为从未调用 complete 回调。

// use this toggle to check if the callback has been completed
var completeCallbackCalled = false; 

$(".inno-bg").mouseenter(function () {
    $(this).stop(true, true).animate({ width: "320px" }, 
        {
            // ...
        complete: function(){
            // This will ONLY be called when the animation is fully completed
            // Meaning; has NOT been stopped with the .stop() function
            completeCallbackCalled = true; // toggle
        }
    });
});

$(".inno-bg").mouseleave(function() {
    // now use the toggle to see if you need to run the animation
    // which pushes the h2 back down again
    if(completeCallbackCalled) {
        // animate here!
    }

    // reset the toggle
    completeCallbackCalled = false;
});

你应该内置一个 'has been completed' 开关来检查你是否应该执行 return-动画。查看 revised fiddle 以获取工作示例。

Answer 2

另一个答案确实解释了问题的原因，但他们的答案无法应对动画的多个实例。

最好避免标志的全局变量，并在元素本身上使用状态。在此示例中，我使用 completed class 来控制两个实例的状态（但 data() 值可以）：

JSFiddle: http://jsfiddle.net/poxgawf4/8/

$(".inno-bg").mouseenter(function () {
    var $this = $(this);
    $this.css('background-image', 'none');
    $this.css("background-color", "#1A6397");
    $this.stop(true, true).animate({
        width: "320px"
    }, {
        //easing: 'swing',
        duration: 500,
        complete: function () {
            $this.find("h2").stop(true, true).animate({
                'marginTop': "-=60px"
            });
            $this.find("p").fadeIn(1000);
            console.log('complete function called');
            $this.addClass("completed");
        }
    });
}).mouseleave(function () {
    var $this = $(this);
    if ($this.hasClass("completed")) {
        $(this).find("h2").stop(true, true).animate({
            'marginTop': "+=60px"
        }, 200);
        $this.removeClass('completed');
    }
    imageUrl = "http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2014/02/gaia_calibration_image/14263603-2-eng-GB/Gaia_calibration_image_node_full_image_2.jpg";
    $this.css('background-image', 'url(' + imageUrl + ')');
    $this.stop(true, false).animate({
        width: "160px"
    });
    $this.find("p").hide();
});

我还链接了 enter 和 leave 方法，因为它们在同一个选择器上。

jQuery stop() 和 animate() 函数问题

jQuery stop() and animate() function issue

jquery

animation