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

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

• javascript
• jquery
• html
• css

• What you are looking for is the setTimeout function in javascript. developer.mozilla.org/en-US/docs/Web/API/Window.setTimeout – entropic Commented Aug 15, 2014 at 21:19
• Thanks, but i have no experience with jQuery or JS and have no idea how to implement this, – Bradders Commented Aug 15, 2014 at 21:20
• Also note that the .live() event is deprecated as of jQuery 1.7 – you can replace it with .on() – Marcel Commented Aug 15, 2014 at 21:26

3 Answers 3

Just add the .delay to your code like this

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

its in milliseconds.

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

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

or you can use.

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