悬停的 jQuery 动画答案

【问题标题】：jQuery animation for a hover悬停的 jQuery 动画
【发布时间】：2010-08-16 12:03:55
【问题描述】：

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

我知道如何制作动画，但是当我将鼠标悬停在锚元素上方时，我遇到了麻烦。有时两张图片（第一张和第二张出现）等等。

这是我已经得到的，我应该如何正确地做到这一点？

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);
}

【问题讨论】：

标签： jquery animation hover

【解决方案1】：

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

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

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

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

这样可以确保，.animate() 只有在当前没有动画播放时才会被调用。

参考：.stop()，:animated

【讨论】：