jQuery动画在悬停时重复自己？答案

【问题标题】：jQuery animation repeating itself upon unhover?jQuery动画在悬停时重复自己？
【发布时间】：2013-07-04 10:37:13
【问题描述】：

$(".test").bind("webkitAnimationEnd MSAnimationEnd OAnimationEnd animationEnd", function () {
$(this).removeClass("animate");
});

$(".test").hover(function () {
$(this).addClass("animate");
});

当您将鼠标悬停在 .test 元素上时，它会添加一个触发动画的 animate 类。在动画结束时，animate 类被 animationEnd 删除。

但是，如果您将鼠标悬停在动画上直到完成，然后在动画完成后取消悬停，则会添加另一个 animate 类...在取消悬停时再次触发动画。我不想要这个。

如何制作 jQuery，以便当您取消悬停时，它不会向 .test 元素添加另一个 animate 类？

另外... FireFox 没有删除animationEnd 的animate 类，这是为什么呢？

【问题讨论】：

标签： jquery animation jquery-animate

【解决方案1】：

由于您只传递了一个回调来悬停，它将在 mouseenter 和 mouseleave 上调用。

如果您只想将鼠标悬停在动画上

$(".test").mouseenter(function () {
    $(this).addClass("animate");
});

【讨论】：

【解决方案2】：

使用mouseenter 事件而不是hover

$(".test").mouseenter(function () {
    $(this).addClass("animate");
});

Fiddle

【讨论】：

+1 表示唯一有小提琴演示的人。只是因为它有用。

【解决方案3】：

您没有给出hover 事件所需的第二个函数。试试这个...

$(".test").bind("webkitAnimationEnd MSAnimationEnd OAnimationEnd animationEnd", function () {
    $(this).removeClass("animate");
});

$(".test").hover(function () {
    $(this).addClass("animate");
}, function() {
});

【讨论】：

【解决方案4】：

你可以试试：

$(".test").hover(function(){
 $(this).addClass("animate");
}, function() { //unhover 
 return false; 
});

第二个function 是unhover 回调

【讨论】：

【解决方案5】：

Hover 有两个功能，hoverin 和 hoverout。所以像这样修改它......

$(".test").hover(function () { // hoverin function
    $(this).addClass("animate");
}, function(){ // hoverout function
    $(this).removeClass("animate");
});

【讨论】：