javascript - 在 jquery 函数中添加延迟

Question

我在 jquery 中创建了一个小函数。我希望它在延迟一段时间后加载。但是我无法延迟执行此代码。这是下面的 Jquery 代码。

$(function(){
        $('.fade').delay(5000).show();
        $('.sboxa').delay(5000).show()
    })

下面是html代码:

<div class="fade"></div> <div class="sboxa"></div>

请帮助实现此功能。谢谢

Answer 1

要对动画进行排序，您需要在 show() 方法中使用回调。在回调中，您可以使用 setTimeout() 来延迟下一个元素的显示。

$(function(){
    $('.fade,.sboxa').hide();
  
    $('.fade').show(0, function() {
        setTimeout(function() {
            $('.sboxa').show();
        }, 2000);
    });
});

.fade {
  display: block;
  width: 50px;
  height: 50px;
  background: cornflowerblue;
}

.sboxa {
  display: block;
  width: 100px;
  height: 100px;
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fade">fade</div>
<div class="sboxa">sboxa</div>