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クラスが追加されます...ホバーを外すとアニメーションが再びトリガーされます。これいらない。

animatejQueryを作成して、ホバーを外したときに要素に別のクラスを追加しないようにする方法は.test?

animateまた... FireFox は のクラスを削除しませんanimationEnd。なぜですか?

Answer 1

ホバーにコールバックを 1 つだけ渡しているため、これは mouseenter と mouseleave で呼び出されます。

マウスだけをアニメーションさせたい場合は、

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

Answer 2

mouseenter代わりにイベントを使用hover

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

フィドル

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

Hover は、hoverin と hoverout の 2 つの関数を使用します。SOこのように変更します...

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