遅延で非表示になる挙動が作りたい

Question

いつもお世話になっております。

実現したいこと

「遅延で非表示になる挙動が作りたい。」
具体的にはスマホ版google driveのメニューバーのような挙動です。

1.表示されている「メニュー」が5秒後に非表示
2.「メニュー」が非表示になった後、bodyをタップすると「メニューバー」が表示
3.2で表示した「メニューバー」は再度、5秒後に非表示

上記3.2で表示した「メニューバー」は5秒後に非表示の部分でつまずいています。

###該当のソースコード

<style>
#menu{
  animation: anime1 1s ease 5s 1 forwards;
}

@keyframes anime1 {
0% {opacity: 1.0;}
100% {opacity: 0.0;}
}

#menu.show {
  animation: anime2 1s ease 5s 1 forwards;
}

@keyframes anime2 {
0% {opacity: 1.0;}
100% {opacity: 0.0;}
}

#menu.hide {
  animation: anime3 1s ease -2s 1 forwards;
}

@keyframes anime3 {
0% {opacity: 0.0;}
100% {opacity: 0.0;}
}
</style>
<script type="text/javascript">
$("#switch").click(function(){
    if( $("#menu").hasClass("show") == false){
      alert("表示")
      $("#menu").addClass("show");
      $("#menu").removeClass("hide");
    }else{
      
      alert("非表示")
      $("#menu").addClass("hide");
      $("#menu").removeClass("show");
    }
})
</script>

<div id="switch">スイッチ</div>
<div id="menu">メニュー</div>

###試したこと

当初はsetIntervalで遅延を表現しました。
しかし、自然非表示中にスイッチによる非表示にすると5秒のカウントがリセットされず、
再表示したときに続きのカウントから始まってしまう。
ですのでsetIntervalでの遅延は断念しました。

---

次にcss3.0でanimationのdelayを利用しました。
しかし、これでも問題があります。

・5秒後に自然非表示になった後では、スイッチによる非表示か自然非表示かの判定が分からない。（opacityの数値でif判定するとややこしくなるので、シンプルにフラグをつける形でif判定したいため）

簡略化しましたが以上が悩んでいる部分の骨子です。

お手数ではありますが、どうぞよろしくお願い致します。

Answer 1

showはいりますか？隠すだけならhideの設定のみでよいかと。
またsetIntervalは繰り返し処理なのでsetTimeoutしてみてはどうでしょうか？

#menu.hide {display:none;}

$(function(){
  $("#switch").on('click',function(){
    var flg=!$("#menu").hasClass("hide");
    console.log(flg?"非表示":"表示");
    setTimeout(function(){$("#menu").toggleClass('hide',flg)},5000);
});
});

<div id="switch">スイッチ</div>
<div id="menu">メニュー</div>

#追記
これでどうでしょう？

$(function(){
  var timerID=0;
  $("#switch").on('click',function(){
    $("#menu").toggleClass('hide');
    if(timerID)  clearTimeout(timerID);
    if(!$('#mene').hasClass('hide'))  timerID=setTimeout(function(){$("#menu").addClass('hide',flg)},5000);
  });
});

Comments

[akamotosan]

ご回答ありがとうございました。
しかし、こちらの説明が足りないせいでまったく違う仕様で伝わっているようです。。。

求めている挙動は下記です。
・メニューはほっておくと自然に5秒後に非表示
・スイッチを押すとメニューは即時非表示
・メニューが非表示の時にスイッチを押すとメニューは即時表示
・メニューが再度表示されてから5秒後たつと非表示

[yambejp]

追記しておきました

[akamotosan]

確認しました。
おかげで希望する動きを実現することができました。
ありがとうございます！