下記コードでマウスオーバー時にclassを付与しています。
fedeIn、fadeOutのcssアニメーションをそれぞれ1秒間つけているのですが、
マウスアウト時から1秒間は戻りのアニメーションがあるのでmouseoverでのaddClass('over')のイベントを無効にしたいと考えています。
javascript
1$(".hoge").on({ 2 'mouseover': function () { 3 $(this).addClass('over').removeClass('out'); 4 }, 5 'mouseout' : function () { 6 $(this).addClass('out').removeClass('over'); 7 } 8});
css
1.over { 2 animation-name: over; 3 animation-duration: 1s; 4 animation-fill-mode: both; 5} 6.out { 7 animation-name: out; 8 animation-duration: 1s; 9 animation-fill-mode: both; 10} 11@keyframes over { 12 from { 13 opacity: 1; 14 } 15 to { 16 opacity: .1; 17 } 18} 19@keyframes out { 20 from { 21 opacity: .1; 22 } 23 to { 24 opacity: 1; 25 } 26}
単純に
javascript
1$(".hoge").on({ 2 'mouseover': function () { 3 $(this).addClass('over').removeClass('out'); 4 }, 5 'mouseout' : function () { 6 $(this).addClass('out').removeClass('over'); 7 setTimeout(function() { 8 $(this).off('mouseover'); 9 }, 1000); 10 } 11});
でいけないかなと思いましたが無理でした。
何か方法はないでしょうか。
よろしくお願いいたします。
回答3件
あなたの回答
tips
プレビュー