user580523
user580523

Reputation:

jQuery - How to Delay between effects?

I'm simply trying to delay an action before it starts but I seem to be having some trouble.

This is my code:

$(document).ready(function(){
    $(".action1").bind("load", function () { $(this).fadeOut('slow'); });
    $(".action2").bind("load", function () { $(this).fadeIn('slow'); });
});

And I basically want to delay the first action from taking place just for a few seconds (onLoad).

Upvotes: 1

Views: 1354

Answers (5)

smcdrc
smcdrc

Reputation: 1691

setTimeout ( expression, timeout );

Upvotes: 0

typeof
typeof

Reputation: 5922

Try

$(this).delay(2000).fadeOut('slow');

Upvotes: 0

Dutchie432
Dutchie432

Reputation: 29160

try using the delay() function

$(document).ready(function(){
    $(".action1").bind("load", function () { $(this).delay(2000).fadeOut('slow'); });
    $(".action2").bind("load", function () { $(this).fadeIn('slow'); });
});

Upvotes: 1

BrunoLM
BrunoLM

Reputation: 100321

Wrap your function calls in setTimeout.

setTimeout( func, delay );

setTimeout(function() {
    /* your code */
}, 1000);

Upvotes: 0

Chandu
Chandu

Reputation: 82903

Try this(added delay for the first element before fadeOut call):

$(document).ready(function(){
    $(".action1").bind("load", function () { $(this).delay(2000).fadeOut('slow'); }); //Delay for 2 seconds
    $(".action2").bind("load", function () { $(this).fadeIn('slow'); });
});

Reference: http://api.jquery.com/delay/

Upvotes: 3

Related Questions