使用 setInterval 隐藏和显示循环答案

【问题标题】：Hide & show loop with setInterval使用 setInterval 隐藏和显示循环
【发布时间】：2012-02-01 20:33:11
【问题描述】：

我有一个 gif 动画，它会永远循环播放。但是，我不希望它一直可见，所以我基本上需要给动画 3 秒运行一次，然后将其隐藏并在 10 秒后使其再次可见 3 秒。

我目前有这个，但它不起作用：

<script type="text/javascript">

    function autoupdate() {

  $('#bird').delay(3000);
  $('#bird').css('display', 'none'):
  $('#bird').delay(10000);
  $('#bird').css('display', 'block');
  }

  $(document).ready(function() {
    setInterval("autoupdate()", 50);
  }); 
  </script>

【问题讨论】：

标签： javascript jquery loops settimeout setinterval

【解决方案1】：

删除()

  $(document).ready(function() {
    setInterval(autoupdate, 50);
  });

旁白：代码中的.delay(..) 不会做任何事情......这不是它的意图。

试试这个：

function autoupdate() {
  setTimeout(function(){
     $('#bird').css('display', 'none');
     setTimeout(function(){
        $('#bird').css('display', 'block');
        setTimeout(autoupdate, 50);
     }, 10000)
  }, 3000)
}

$(function(){ //same as $(document).ready(function(){
   setTimeout(autoupdate, 50);
});

小提琴：http://jsfiddle.net/maniator/NYkCr/

【讨论】：

【解决方案2】：

Neal 的解决方案有一个错误，因为它会隐藏 13 秒......而不是 10 秒。我认为以下内容更适合您，并且不包含那些 50 毫秒的解决方法。

Here is my fiddle

<div id="bird">
    bird
</div>
<script>
     function autoupdate() {

  $('#bird').css('display', 'none');
  setTimeout(function(){$('#bird').css('display', 'block')},10000);
  setTimeout(autoupdate,13000);

  }

 setTimeout(autoupdate,3000);
</script>

【讨论】：

我的答案只会隐藏 10 秒。再读一遍^_^甚至数：-P。你的时间也可能每次都不一样