隐藏&使用 setInterval 显示循环

发布于 2024-12-23 18:18:47 字数 430 浏览 1 评论 0原文

我有一个会永远循环的 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>

原文

I have a gif animation that will loop forever. However, I don't want it to be visible all the time, so what I basicly need is to give the animation 3 seconds to run once, then hide it and after 10 seconds make it visible again for 3 seconds.

I currently have this, but it isn't working:

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

雨轻弹 2024-12-30 18:18:47

删除 ()

  $(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/

Remove the ()

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

Side point: the .delay(..) in your code won't do anything.... That is not what it intent it.

Try this instead:

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);
});

Fiddle: http://jsfiddle.net/maniator/NYkCr/

回复收藏 0 原文

山有枢 2024-12-30 18:18:47

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

这是我的小提琴

<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>

There is a mistake in Neal's solution as it will hidden for 13 seconds.. not 10.
I think the following will suit you better, and it does not contain those 50 millis workaround.

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>

回复收藏 0 原文

~没有更多了~