Question

当您将鼠标悬停在锚元素上时，我正试图为徽标设置动画。当我将鼠标悬停在徽标上时，当第一个图像完成时，图像需要向上，另一个图像向下。当鼠标离开时，它应该反过来，当前元素（第二个）应该向上，当它离开时，第一个元素应该向下。

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

这就是我已经得到的，我该怎么做呢？

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

您应该在致电.stop(true, true)（在链中）之前致电.animate()，或者您可以创建一些声明，例如。

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

确保在开始新动画之前brush停止所有动画。 .stop()的参数是“CleartQueue”和“JumpToEnd”。

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

这确保了，如果当前没有动画，则.animate()仅被调用。

参考：.stop()，:animated

用于悬停的jQuery动画

1 个答案: