I have created a small function in jquery. I want it to load after some delay in time. But I am unable to execute this code with delay. Here is the Jquery code below.
$(function(){
$('.fade').delay(5000).show();
$('.sboxa').delay(5000).show()
})
Here is the html code below:
<div class="fade"></div> <div class="sboxa"></div>
Please help in this functionality. Thanks
To sequence animations you need to use callbacks in the show() method. Inside the callback you can use a setTimeout() to delay the showing of the next element.
$(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>The answer of @Soviut is correct, but I think you should add a slow param to show or hide method like this:
$(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>Hope this helps!
The JQuery animation functions take an optional function argument that is executed after the animation is complete to allow for "chained" animations. No manual timers are needed.
$(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>