CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Bradders
Bradders

Reputation: 23

Add a delay to jQuery fadeIn function

I am trying to add a delay to my fadeIn function in jQuery. The purpose of the code is that when 'topmods' or 'dailyskins' button is pressed it will hide/show the other parent div.

Currently when i press the div 'topmods' is does hide the div 'dailyskins' though the content of 'topmods' goes below 'dailyskins' for a split second until 'dailyskins' has finished fading out.

I think this would be solved by adding a delay to both fadeIn and Out, though i don't know how to add this,

Please could you add a delay of 200ms to each of the fadeIn segments. 

jQuery(document).ready(function(){

     $("#topmods").hide();


jQuery('#dropdailyskin').live('click', function(event) {        
     jQuery('#dailyskins').fadeIn('show');
});

jQuery('#dropdailyskin').live('click', function(event) {        
     jQuery('#topmods').fadeOut('show');
});


 jQuery('#dropdownmods').live('click', function(event) {        
     jQuery('#dailyskins').fadeOut('show');
});

 jQuery('#dropdownmods').live('click', function(event) {        
     jQuery('#topmods').fadeIn('show');
});

Thanks

Upvotes: 2

Views: 15730

Answers (3)

user3946178
user3946178

Reputation:

or you can use.

$("idhere").delay(1000).show();

Upvotes: 1

user3946178
user3946178

Reputation:

Just add the .delay to your code like this

$("idhere").delay(1000).fadeIn(500);

its in milliseconds.

Upvotes: 15

Marcel
Marcel

Reputation: 683

You can add a timeout before executing your function using this:

setTimeout(function(){jQuery('#dailyskins').fadeIn('show')}, 200);

Upvotes: 3

Related Questions