web-dev-qa-db-ja.com

ホバーのAnimate.css

今日私は自分のサイトに実装しようとしました animate.css

しかし、私は '効果がホバーでアクティブ化されることを確認したかったので、jqueryを使用しました

コードは次のとおりです。

 $(".questo").hover( function (e) {
    $(this).toggleClass('animated shake', e.type === 'mouseenter');
});

問題は、マウスを取り外すと、効果が中断されることです。いったんホバー効果が開始されなくても、効果が発生する可能性はありますか？

よろしくお願いします

javascriptjqueryhtmlcssanimate.css
17
user3198605

このバリアントを見る（よりインタラクティブ）：

$(".myDiv").hover(function(){
    $(this).addClass('animated ' + $(this).data('action'));
});
$(".myDiv").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",function(){
    $(this).removeClass('animated ' + $(this).data('action'));
});

http://jsfiddle.net/DopustimVladimir/Vc2ug/

8
DopustimVladimir

CSSファイルに次のように追加できます。

.questo:hover {
    -webkit-animation: shake 1s;
    animation: shake 1s;
}

このソリューションの良い点は、JavaScriptを必要としないことです。参考のためにこれを見てください ページ

39
Ben Leitner

ホバー時にクラスを切り替えるのではなく、次のようにマウスの入力時にクラスを追加します

$(".questo").mouseEnter(function(event) {
    $(this).addClass("animated shake");
});

次に、アニメーションが終了したときにクラスを削除できます

$(".questo").on("webkitAnimationEnd mozAnimationEnd oAnimationEnd animationEnd", function(event) {
    $(this).removeClass("animated shake");
});

マウスが要素の外に移動したときにアニメーションをトリガーできるため、ホバーするのではなく、マウスを入力したときにそれを行います。

例については、この jsFiddle を参照してください

4
Martin

toggleClassを使用する代わりに、ホバーにクラスを追加してコードを変更し、アニメーションの終了css3をフックして終了し、クラスを削除します。

コード：

$(".questo").hover(function (e) {
    $(this).addClass('animated shake');
});

$(".questo").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function () {
    $(this).removeClass('animated shake');
});

デモ： http://jsfiddle.net/IrvinDominin/xxJ7K/1/

1
Irvin Dominin

マウスが離れるとアニメーションが停止し、ホバー時に開始したままのアニメーションを実現しようとしていると言っていると思います。

この場合、アニメーションの反復回数を無限に設定する必要があります。追加してください

 animation-iteration-count:infinite

スタイルシートのアニメーションクラスに追加します。

0
Spdexter

マウスが入ったときにクラスを追加し、マウスが離れたときにクラスを削除するとします。

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

$(".questo").hover( function (e) { $(this).addClass('animated shake'); }, function(e){ $(this).removeClass('animated shake'); });

0
Vivek

私は最高の解決策を見つけました。任意のクラスでアニメーションを一時停止する必要があります。また、html要素でアニメーションを開始するようにアニメーションを実行するように設定することもできます reference

.animatedhover {
  animation-play-state: paused;
}
.animatedhover:hover {
  animation-play-state: running;
}
0
Darkcoder