Question

这是我的小提琴：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

我现在看到了更新的小提琴。问题是在第一个事件（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;
});

你应该内置一个已经完成的＆＃39;切换以检查是否应该执行返回动画。查看revised fiddle以获取工作示例。

Answer 2

的另一个答案解释问题的原因，但他们的答案不会处理动画的多个实例。

最好避免使用标志的全局变量，并在元素本身上使用状态。在这个例子中，我使用completed类来控制两个实例的状态（但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();
});

我还链接了进入和离开方法，因为它们在同一个选择器上。

jQuery stop（）和animate（）函数问题

2 个答案: