javascript - 如何在一段时间后隐藏和显示我的功能？

Question

我试图在一段时间内隐藏我的文本，然后使用一个函数显示。目前它正在闪烁我不希望它隐藏等待几秒钟然后显示。

setTimeout(function() {
  $('.hotKeys').hide();
  $('.shortcut').hide();
}, 5000);
$(document).ready(function() {
  var $hotKeys = $('.hotKeys');
  var $shortcut = $('.shortcut');

  function runIt() {
    $hotKeys.animate({
      opacity: '0.6'
    }, 1000);
    $hotKeys.animate({
      opacity: '0'
    }, 1000, runIt);
    $shortcut.animate({
      opacity: '0.6'
    }, 1000);
    $shortcut.animate({
      opacity: '0'
    }, 1000, runIt);
  }
  runIt();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="hotKeys">hot keys</h4>
<ul class="shortcut">
  <li>h</li>
  <li>p</li>
  <li>s</li>
  <li>c</li>
</ul>
</div>

我试过将隐藏函数放在代码的不同区域，我认为“.delay()”可以解决问题，但我似乎无法弄明白。

Answer 1

给您一个解决方案 https://jsfiddle.net/bvxft9de/1/

$(document).ready(function() {
   
   $('.hotKeys').hide();
   $('.shortcut').hide();
   
   var $hotKeys = $('.hotKeys');
   var $shortcut = $('.shortcut');
   function runIt() {	
     $('.hotKeys').show();
     $('.shortcut').show();
     $hotKeys.animate({opacity:'0.6'}, 1000);
     $hotKeys.animate({opacity:'0'}, 1000, runIt);
     $shortcut.animate({opacity:'0.6'}, 1000);
     $shortcut.animate({opacity:'0'}, 1000, runIt);
   }
   
   setTimeout(function(){
     runIt();
   }, 2000);
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="hotKeys">hot keys</h4>
<ul class="shortcut">
  <li>h</li>
  <li>p</li>
  <li>s</li>
  <li>c</li>
</ul>

最初，您的文字会隐藏 2 秒，然后开始播放动画。

希望对您有所帮助。