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

小提琴

Answer 3

您没有提供hover事件所需的第二个功能。尝试这个...

$(".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; 
});

第二个function是unhover回调

Answer 5

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

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