javascript - 使用jquery延迟图像加载

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

 $(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 () {

                    });
                });
            });
        });
    }

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

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