質問: 「遅延で非表示になる挙動が作りたい。」 具体的にはスマホ版google driveのメニューバーのような挙動です。 1.表示されている「メニュー」が5秒後に非表示 2.「メニュー」が非表示になった後、bodyをタップすると「メニューバー」が表示 3.2で表示した「メニューバー」は再度、5秒後に非表示 上記3.2で表示した「メニューバー」は5秒後に非表示の部分でつまずいています。 ### 該当のソースコード ``` スイッチ メニュー ``` ### 試したこと 当初はsetIntervalで遅延を表現しました。 しかし、自然非表示中にスイッチによる非表示にすると5秒のカウントがリセットされず、 再表示したときに続きのカウントから始まってしまう。 ですのでsetIntervalでの遅延は断念しました。 --- 次にcss3.0でanimationのdelayを利用しました。 しかし、これでも問題があります。 ・5秒後に自然非表示になった後では、スイッチによる非表示か自然非表示かの判定が分からない。(opacityの数値でif判定するとややこしくなるので、シンプルにフラグをつける形でif判定したいため) 簡略化しましたが以上が悩んでいる部分の骨子です。 お手数ではありますが、どうぞよろしくお願い致します。
回答: 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); }); }); ``` ``` スイッチ メニュー ``` 追記 == これでどうでしょう? ``` $(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); }); }); ```