Question

我制作了一个HTML页面。我想在页面中使用jQuery逐步加载，但我不知道是否可以。

我的HTML代码：

someone@ses.example.com

按顺序淡入淡出！

Answer 1

试试这个

$('.main-child').each(function(i) {$(this).fadeOut(0).delay(1000*i).fadeIn(1850);});

这是JsFiddle

Answer 2

也许是这样的？我们使用.each()遍历所有元素，并设置setTimeout()，其时间取决于索引i。

＆＃13;

$(".main-child").each(function (i) {
    var element = $(this); 
    setTimeout(function() { 
      element.animate({"opacity": 1}, 500);
    }, 200*i);
  });

＆＃13;

.main-child{
  width: 100%;
  height: 20px;
  background-color: red;
  opacity: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-template">
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
    <div class="main-child"></div>
</div>

＆＃13;

Answer 3

尝试如下：

＆＃13;

$(function(){
$('.main-child').hide();
$('div.main-child').each(function(i){
$(this).delay(i*800).fadeIn('slow');
});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main-template">
    <div class="main-child">1</div>
    <div class="main-child">2</div>
    <div class="main-child">3</div>
    <div class="main-child">4</div>
    <div class="main-child">5</div>
    <div class="main-child">6</div>
    <div class="main-child">7</div>
    <div class="main-child">8</div>
    <div class="main-child">9</div>
    <div class="main-child">10</div>
    <div class="main-child">11</div>
    <div class="main-child">12</div>
    <div class="main-child">13</div>
    <div class="main-child">14</div>
    <div class="main-child">15</div>
    <div class="main-child">16</div>
</div>

＆＃13;

一步一步加载div（淡入）

3 个答案: