Question

我有四个div，我想一个接一个地加载，

div1加载1秒

div2在3秒内加载

div3在5秒内加载

div4在7秒内加载

我的代码是

function runAnimation() {

    $('#main-div').fadeIn(1500, function(){
        $('#first-div').fadeIn(1500, function () {
            $('#second-div').fadeIn(3000, function(){
                $('#third-div').fadeIn(6000, function () {

                });
                $('#fourth-div').fadeIn(12000, function () {

                });
            )};
        });
    };

我不确定我是否做得对，有人可以解释为什么这不起作用并提供一个例子吗？

Answer 1

这可以使用css

完成

添加不同延迟的每个div

animation-name: fadeinLoad; 
animation-duration: 1s; 
animation-delay: 5s; 
animation-fill-mode: forwards;

@-webkit-keyframes fadeinLoad {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeinLoad {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

工作示例

https://jsfiddle.net/dolphine/8xx1v8q3/

Answer 2

＆＃13;

 $(document).ready(function () {

        runAnimation();
    });

    function runAnimation() {
        $('#main-div').fadeIn(1500, function () {
            $('#first-div').fadeIn(1500, function () {

                $('#second-div').fadeIn(3000, function () {
                    $('#third-div').fadeIn(6000, function () {

                    });
                    $('#fourth-div').fadeIn(12000, function () {

                    });
                });
            });
        });
    }

＆＃13;

  .box {
            background-color: red;
            width: 100px;
            height: 100px;
            display: none;
        }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  <div id="main-div" class="box"><img src="https://c1.staticflickr.com/4/3920/14837486544_59d308d3ef_m.jpg" width="100"></div>
<div id="first-div" class="box">
    <p>Text inside div</p>
</div>
<div id="second-div" class="box">
    <p>Text inside div</p>
</div>
<div id="third-div" class="box">
    <p>Text inside div</p>
</div>
<div id="fourth-div" class="box">
    <p>Text inside div</p>
</div>

＆＃13;

Answer 3

或Class Z

plain javascript

使用jquery延迟图像加载

3 个答案: