0

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。なぜですか?

4

5 に答える 5

2

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

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

$(".test").mouseenter(function () {
    $(this).addClass("animate");
});
于 2013-07-04T10:39:27.923 に答える
2

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

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

フィドル

于 2013-07-04T10:39:45.313 に答える
1

hoverイベントに必要な 2 番目の関数が指定されていません。これを試して...

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

$(".test").hover(function () {
    $(this).addClass("animate");
}, function() {
});
于 2013-07-04T10:40:09.923 に答える
1

あなたが試すことができます：

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

2番目functionはunhoverコールバックです

于 2013-07-04T10:41:02.197 に答える
0

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

$(".test").hover(function () { // hoverin function
    $(this).addClass("animate");
}, function(){ // hoverout function
    $(this).removeClass("animate");
});
于 2013-07-04T10:41:32.090 に答える