jQuery動畫在重新啓動時重複嗎？

Question

http://jsfiddle.net/jDk8j/

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

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

當你將鼠標懸停在.test元素它添加一個animate類，這將觸發動畫。在動畫結束時，animate類被animationEnd刪除。

但是，如果您將動畫懸停在動畫上直到完成，然後在動畫完成後取消懸停，則會添加另一個animate類...在非懸停時再次觸發動畫。我不想要這個。

如何讓jQuery這樣，當你不使用它時，它不會將animate類添加到.test元素中？

另外... FireFox不會刪除animate類animationEnd，爲什麼？

Answer 1

因爲您只傳遞一個回調來懸停它將在mouseenter和mouseleave上調用。

如果你想在

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

Answer 2

使用mouseenter事件動畫只鼠標，而不是hover

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

Fiddle

Answer 3

你不給由hover所需的第2個功能事件。試試這個...

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

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

Answer 4

你可以嘗試使用：

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

第2 function是unhover回調

Answer 5

哈弗有兩個功能，hoverin和hoverout。 SO修改它像這樣...

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