使用jquery以一个延迟逐个加载div | 使用jquery以一个延迟逐个加载div

本文介绍了使用jquery以一个延迟逐个加载div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我的整个代码。我试图做的是让 - 。当DOM准备好时，第一个div显示在页面上，第二个显示在延迟之后，然后是第三个，依此类推直到150.

现在的代码的问题是，整个

我的代码 -

 <！DOCTYPE html> 
< html> 
< head> 
< meta charset =UTF-8> 
< title>测试虚线div< / title> 
< style type =text / css> 
 .dashdiv 
 {
 width：150px; 
 height：50px; 
背景：＃ae2d3e; 
 float：left; 
 box-shadow：10px 10px 6px＃d4a7b0; 
 margin：5px; 
} 
< / style> 
< / head> 
< body> （$ i = 0; $ i  {
？> 
<？php 
 
< div class =dashdiv> 
这是一个div文本
< / div> 
<？php 
} 
？> 
< script type =text / javascriptsrc =http://code.jquery.com/jquery-latest.js>< / script> 
< script type =text / javascript> 
 $（document）.ready（function（）{
 $（'div.dashdiv'）。each（function（）
 {
 $（this）.hide（） .delay（1000）.fadeIn（1850）; 
}）; 
}）; 
< / script> 
< / body> 
< / html>

解决方案

您遇到的问题，没有人提到的是，jQuery delay（）只能在fx队列上链接。因此，在 hide（）之后使用它将不起作用。快速修复它的工作原理是使用效果代替 hide（），即：

<$ p $（$）$（$）$（$） ;
}）;

This is my whole code..what I am trying to do is to have-. when DOM is ready first div shows on page and second one after a delay and then third one and so on up to 150.

Problem with the current code is that, whole 150 div loads at once after a small delay.

My code -

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test for dashed div</title>
<style type="text/css">
.dashdiv
{
    width: 150px;
    height: 50px;
    background: #ae2d3e;
    float:left;
    box-shadow: 10px 10px 6px #d4a7b0;
    margin: 5px;
}
</style>
</head>
<body>
    <?php
    for($i =0; $i < 150; $i++)
    {
    ?>
    <div class="dashdiv">
    This is a div text
    </div>
    <?php
    }
    ?>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('div.dashdiv').each(function()
    {
          $(this).hide().delay(1000).fadeIn(1850);
    });
});
</script>
</body>
</html>

解决方案

The problem you're facing, which no one has mentioned, is that jQuery delay() is only chainable on an fx queue. So, using it after hide() will not work. A quick fix to get it working would be to use an effect in place of hide(), ie:

$('div.dashdiv').each(function(i) {
  $(this).fadeOut(0).delay(1000*i).fadeIn(1850);
});

这篇关于使用jquery以一个延迟逐个加载div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！