Jquery显示Div与间隔

Jquery Display Div with Interval

本文关键字：Div 显示 Jquery      更新时间：2023-09-26

我正在寻找隐藏几个div一个接一个或以5秒的时间间隔，我尝试下面似乎不工作，虽然

<div id="container">
<div id="data1">123</div>
<div id="data2">456</div>
<div id="data3">789</div>
<div id="data4">012</div>
</div>
<script>
$('document').ready(function(){
     window.setTimeout('mytimer()',5000);
  });
$('document').ready(function(){
     window.setTimeout('mytimer2()',10000);
  });
$('document').ready(function(){
     window.setTimeout('mytimer3()',15000);
  });
$('document').ready(function(){
     window.setTimeout('mytimer4()',20000);
  });

  function mytimer(){   $('#data1').hide();    } 
  function mytimer2(){   $('#data2').hide();    } 
  function mytimer3(){   $('#data3').hide();    } 
  function mytimer4(){   $('#data4').hide();    } 
  </script>

我会使用单个超时函数，因为您是定期隐藏的。你的代码中有一个错误，你需要将函数的引用传递给setTimeout，而不是将函数调用作为字符串传递。

现场演示

window.setTimeout(mytimer,1000);
index = 1;
function mytimer()
{     
     $('#data' + (index++)).hide();
     if(index <= 4) window.setTimeout(mytimer,1000);
}

您需要使用$(document)而不是$('document')

$('document')将查找具有document标记的HTML元素，该元素不存在。

学习使用开发工具，这里有一个很好的阅读:如何在不同的浏览器打开JavaScript控制台?

<

代码/em> 

$(document).ready(function(){
     window.setTimeout(mytimer,5000); //You can simply pass the function reference 
     window.setTimeout(mytimer2,10000);
     window.setTimeout(mytimer3,15000);
     window.setTimeout(mytimer4,20000);
 });

试试这样做:

$(document).ready(function(){
    window.setTimeout(mytimer, 5000);
    window.setTimeout(mytimer2, 10000);
    window.setTimeout(mytimer3, 15000);
    window.setTimeout(mytimer4, 20000);
});
function mytimer(){
    $('#data1').hide();
}
function mytimer2(){
    $('#data2').hide();
}
function mytimer3(){
    $('#data3').hide();
}
function mytimer4(){
    $('#data4').hide();
}

你也可以使用setInterval函数，一旦所有元素都被hidden，你可以像下面这样使用clearInterval:

演示 

function mytimer(elem){   
    console.log('came here');
    $(elem).hide();    
} 
$(document).ready(function(){
    var i=0;
    var interval=null;
    interval = window.setInterval(function(){
         i++;
         if(i<=$('#container').children().length)
             mytimer("#data"+i);
        else
        {
            clearInterval(interval);
            return;
        }
    },5000);
});

尝试此更改，并以此类推:

window.setTimeout(mytimer, 5000);// removed quotes and `()`
另一个解决方案使用jQuery的fadeOut():

$(function() {
  for (var i = 1; 4 >= i; i++)
    $('#data' + i).fadeOut(5000 * i);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
  <div id="data1">123</div>
  <div id="data2">456</div>
  <div id="data3">789</div>
  <div id="data4">012</div>
</div>

在jquery中使用.delay() 。不需要Settimeout函数

$('#data1').delay(5000).hide('fast');
$('#data2').delay(10000).hide('fast');
$('#data3').delay(15000).hide('fast');
$('#data4').delay(20000).hide('fast');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="data1">123</div>
<div id="data2">456</div>
<div id="data3">789</div>
<div id="data4">012</div>
</div>

你的代码中有多个错误。

  1. 您使用的$('document').ready(function(){})是不正确的。document是一个关键字，它不应该在引号中。
  2. 您不必使用多个调用$(document).ready()的实例。您可以从单个函数调用所有语句。您也可以使用$(function(){})。
  3. 在timeout函数内部调用函数名时，不应该把它们放在引号下。在代码中定义它们之后，它们就像关键字一样起作用。Timeout函数内部的函数调用不应该后跟()。所以应该是window.setTimeout(mytimer,5000);

请参考提琴:http://jsfiddle.net/65gs8s9y/

我已经修改了你的代码，现在可以正常工作了:

$(document).ready(function(){
    window.setTimeout(mytimer,5000);
    window.setTimeout(mytimer2,10000);
    window.setTimeout(mytimer3,15000);
    window.setTimeout(mytimer4,20000);
  });
  function mytimer(){   
      $('#data1').hide();    
  } 
  function mytimer2(){   
      $('#data2').hide();    
  } 
  function mytimer3(){   
      $('#data3').hide();    
  } 
  function mytimer4(){   
      $('#data4').hide();    
  }
相关文章：