我在jquery中创建了一个小函数。我想在延迟一段时间后加载它。但我无法延迟执行此代码。以下是下面的Jquery代码。在jquery函数中添加延迟
$(function(){
$('.fade').delay(5000).show();
$('.sboxa').delay(5000).show()
})
这里是下面的html代码：
<div class="fade"></div> <div class="sboxa"></div>
在此功能，请帮助。谢谢
要序列动画，您需要在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>谢谢你:)所以很多 –
@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>希望这有助于！
非常感谢你 –
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>
您正在使用什么版本的jQuery？ – Soviut
你想先显示.fade，然后你想显示.sboxa类啊？ –
你可以发布一个小提琴 – Ramanlfc