CODEWITHSUNDEEP
jquery
Altay Mazlum
Altay Mazlum

Reputation: 442

Is there a timing function in JQuery?

I'd like to know if i could add timer to my code. Like do a command and then 3 seconds later another command. Like in my example, I have two boxes that i've created using css. But I want the first box to move immediately and the second a few seconds later, is it possible? If so, how?

<script>
jQuery(document).ready(function () {
    jQuery("#firstbox").animate({ top: '500px' }, 'slow');
    jQuery("#secondbox").animate({ top: '500px' }, 'slow');
});
</script>

Upvotes: 1

Views: 139

Answers (2)

Tushar
Tushar

Reputation: 87203

You can use delay() to set some delay before animate() run.

Set a timer to delay execution of subsequent items in the queue.

jQuery("#firstbox").animate({
    top: '500px'
}, 'slow');

jQuery("#secondbox").delay(3000).animate({
    top: '500px'
}, 'slow');

Upvotes: 3

Nikhil Batra
Nikhil Batra

Reputation: 3148

You can use setTimeout as follow:

<script>
jQuery(document).ready(function () {
    jQuery("#firstbox").animate({ top: '500px' }, 'slow');
    setTimeout(function(){
        jQuery("#secondbox").animate({ top: '500px' }, 'slow');
    },3000);
});
</script>

Upvotes: 3

Related Questions