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

Answer 2

@Soviut的答案是正确的，但是我认为您应该添加一个slow参数来显示或隐藏这样的方法：

 $(function(){ $('.fade,.sboxa').hide(); $('.fade').show('slow', function() { setTimeout(function() { $('.sboxa').show('slow'); }, 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> 

希望这可以帮助！

Answer 3

JQuery动画函数采用一个可选的函数参数，该参数在动画完成后执行以允许“链接”动画。 无需手动计时器。

 $(function(){ $('.fade,.sboxa').hide(); $('.fade').show(2000, function() { $('.sboxa').show("slow"); }); }); 

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