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事件所需的第二个功能。试试这个......

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

unjover时jQuery动画重复出现？

5 个答案: