悬停的 jQuery 动画

Question

当您将鼠标悬停在锚元素上时，我正在尝试为徽标添加动画效果。当我将鼠标悬停在徽标上时，第一个图像完成后，图像需要向上移动，另一个图像需要向下移动。当鼠标离开时，反之亦然，当前元素（第二个）应该向上，当鼠标离开时，第一个元素应该向下。

我知道如何设置动画，但是当我快速悬停在锚元素上方时，我遇到了麻烦。有时两个图像（第一个和第二个出现）等。

这是我已经得到的，我应该如何正确执行此操作？

function logoAnimation() {
var logo = jQuery('#logo a');
var house = jQuery('#logo_icon_house');
var brush = jQuery('#logo_icon_brush');

var inHandler = function () {
    logo.unbind('mouseleave', outHandler);
    brush.animate({
        "top": "-27px"
    }, 250, function(){
        house.animate({
            "top": "42px"
        }, 250,function(){
            logo.bind('mouseleave', outHandler);
        });
    }
    );
}
var outHandler = function () {
    logo.unbind('mouseenter', inHandler);
    house.animate({
        "top": "-21px"
    }, 250, function () {
        brush.animate({
            "top": "39px"
        }, 250,function(){
            logo.bind('mouseenter', inHandler);
        });
    });
}

logo.mouseenter(inHandler).mouseleave(outHandler);
}

在正确回答我的问题后，我设法使用以下代码解决了这个问题：

function logoAnimation() {
var logo = jQuery('#logo a');
var house = jQuery('#logo_icon_house');
var brush = jQuery('#logo_icon_brush');

var inHandler = function () {
    if(brush.is(':animated')) {
        return;
    }
    brush.stop(true,true).animate({
        "top": "-27px"
    }, 250, function(){
        if(house.is(':animated')) {
            return;
        }
        house.animate({
            "top": "42px"
        }, 250);
    }
    );
}
var outHandler = function () {
    house.stop(true,true).animate({
        "top": "-21px"
    }, 250, function () {
        if(brush.is(':animated')) {
            return;
        }
        brush.animate({
            "top": "39px"
        }, 250);
    });
}

logo.mouseenter(inHandler).mouseleave(outHandler);
}

Answer 1

您应该在调用 .animate() （在链内）之前调用 .stop(true, true) ，或者您可以创建一些类似的语句。

brush.stop(true, true).animate({}); // ...

这可以确保在开始新的动画之前，所有动画都在画笔上停止。 .stop() 的参数是“CleartQueue”和“JumpToEnd”。

if(!brush.is(':animated')) {}

这确保了只有当前没有动画正在进行时.animate() 才会被调用。

参考：.stop()，:动画