マウスアウト時に一定時間マウスオーバーイベントを無効にする方法

Question

下記コードでマウスオーバー時にclassを付与しています。
fedeIn、fadeOutのcssアニメーションをそれぞれ1秒間つけているのですが、
マウスアウト時から1秒間は戻りのアニメーションがあるのでmouseoverでのaddClass('over')のイベントを無効にしたいと考えています。

$(".hoge").on({
  'mouseover': function () {
    $(this).addClass('over').removeClass('out');
  },
  'mouseout' : function () {
    $(this).addClass('out').removeClass('over');
  }
});

.over {
  animation-name: over;
  animation-duration: 1s;
  animation-fill-mode: both;
}
.out {
  animation-name: out;
  animation-duration: 1s;
  animation-fill-mode: both;
}
@keyframes over {
  from {
    opacity: 1;
  }
  to {
    opacity: .1;
  }
}
@keyframes out {
  from {
    opacity: .1;
  }
  to {
    opacity: 1;
  }
}

単純に

$(".hoge").on({
  'mouseover': function () {
    $(this).addClass('over').removeClass('out');
  },
  'mouseout' : function () {
    $(this).addClass('out').removeClass('over');
    setTimeout(function() {
      $(this).off('mouseover');
    }, 1000);
  }
});

でいけないかなと思いましたが無理でした。
何か方法はないでしょうか。

よろしくお願いいたします。

Comments

[m.ts10806]

念のためfedeIn、fadeOutのcssアニメーションもご提示ください。

[helloman]

私がスクリプトの勘違いしておりました。恥ずかしい限りです。css追記しました。

Answer 1

こんなのはだめでしょうか。

var enableMouseOver = function(elm){
    $(elm).addClass('over').removeClass('out');
}

$(".hoge").on({
  'mouseover': function () {
    enableMouseOver(this);
  },
  'mouseout' : function () {
    $(this).addClass('out').removeClass('over');
    let elm = this;
    $(elm).off('mouseover');
    setTimeout(function() {
      $(elm).on('mouseover', function(){enableMouseOver(elm);});
    }, 1000);
  }
});

Comments

[helloman]

少し挙動がおかしいようでした。
.overがうまく付与されてないようで、$(elm).off('mouseover'); の部分が関係ありそうです。
調査します。

[helloman]

中身の要素にdisplay: table;を使っていたのでhoverの挙動がおかしかったようです。ありがとうございました。

Answer 2

$(function(){
  $(".hoge").on({
    'mouseover':function () {
    $(this).addClass('over').removeClass('out');
    },
    'mouseout':function () {
      $(this).delay(1000).queue(function(){
        $(this).addClass('out').removeClass('over').dequeue();
      })
      },
  });
});

追記

なにか簡単な方法がありそうな気もしますが、思いついたままに

$(function(){
  var timerFlg=Array.apply(null,new Array($(".hoge").length)).map(function(){return 0});
  var timerId=Array.apply(null,new Array($(".hoge").length)).map(function(){return 0});
  setInterval(function(){$('#debug').html(timerFlg.join(" "))},100);//debug 用
  $(".hoge").on({
    'mouseover':function () {
      var idx=$(".hoge").index(this);
      if(timerFlg[idx]===0){
        $(this).addClass('over').removeClass('out');
        timerFlg[idx]=1;
      }
    },
    'mouseout':function () {
      var idx=$(".hoge").index(this);
      $(this).addClass('out').removeClass('over');
      clearTimeout(timerId[idx]);
      timerId[idx]=setTimeout(function(num){
        timerFlg[num]=0;
      },1000,idx);
      },
  });
});

<div class="hoge out">test</div>
<div class="hoge out">test</div>
<div class="hoge out">test</div>
<div id="debug"></div>

css追記

.over{background-Color:aqua;}
.out{background-Color:lime;}

Comments

[yambejp]

out後overをとめるのでしたね、ちょっと違いました

[helloman]

参考にさせていただきます。
ありがとうございました。

[yambejp]

フラグで管理する方法を追記しておきました

[helloman]

ありがとうございます。

mouseover時に $(this).addClass('out').removeClass('over'); 部分が動いてしまっているようです。
調査します。

[yambejp]

わたしの解釈がちがいました？
上記スタイルシートをつけてつけて確認してみてください
mouseoutしてから1秒間はデバグに1がついていて、
その間はmouseoverは走りませんよね？

解釈違う場合はもうちょっと詳しく説明してもらえると助かります

[helloman]

すいません。
バッチリでした。
中身の要素にdisplay: table;を使っていたのでhoverの挙動がおかしかったようです。
ありがとうございました。

Answer 3

試されているsetTimeout()の引数だと1000ミリ秒後に実行されているのではありませんか？
setTimeout(funtion(){}, 0);
にしてみたらどうでしょうか。

Comments

[helloman]

勘違いしてました。
お恥ずかしい。。。

[helloman]

ご指摘ありがとうございます。