Comments on: jQuery: Simulating a delay function between fade in/out effects

By: blindsignals

blindsignals — Tue, 18 May 2010 13:18:20 +0000

@Jonathan

If you have the delay plugin you can do something like this

$(selector).delay(1000).fadeIn().delay(3000).fadeOut();

You can get the plugin at http://blindsignals.com/2009/07/jquery-delay/

By: Jonathan

Jonathan — Tue, 18 May 2010 12:37:11 +0000

Guys im a little bit stuck.. I’m pretty new to jQuery but the thing I want is this:

On pageload I have an element wich:

- wait 1 second
- fade in element
- wait 3 seconds
- fade out

How do I do this? Thank you in advanced!

By: KryptoniteDove

KryptoniteDove — Mon, 29 Mar 2010 10:35:44 +0000

Good article, but would have enjoyed more on chainability. You could also use javascript, you could also try

t = setTimeout(“timedCount()”,5000);

after the fadeIn call.

By: Gareth

Gareth — Mon, 08 Mar 2010 17:38:19 +0000

Thanks, thats really helpful, I find the default FadeOut effect in jQuery a little weak, this has resolved that.

By: Panos Karageorgakis

Panos Karageorgakis — Tue, 21 Jul 2009 05:52:09 +0000

Greg, that extra div is a widely used technique that renders text out of the screen while making it still available for screen readers (while display:none does not).

By: Greg Solak

Greg Solak — Tue, 21 Jul 2009 00:50:50 +0000

It’s a little counterproductive to add a hidden class that moves the div out of the viewport’s window. You could simply do:

.hidden {
display: none;
}

And then take the class out as you state…

By: chelfers

chelfers — Wed, 08 Jul 2009 14:25:33 +0000

Trying to figure out why my $().fadeOut() function has just stopped working for now reason and found your post

I created a delay function that can be chained not too long ago since I couldn’t find anything but work arounds using other effects

http://blindsignals.com/index.php/2009/07/jquery-delay/

hope this helps someone out

By: Alex

Alex — Wed, 03 Jun 2009 03:38:01 +0000

save to bookmark)

By: wilman

wilman — Thu, 14 May 2009 11:25:25 +0000

Nice solution Thanks!

By: Aaron Schmidt

Aaron Schmidt — Sun, 19 Apr 2009 07:12:04 +0000

jQuery.fn.extend({
delay : function(speed, callback) {
var opacity = this.css(‘display’) != ‘none’ ? 1 : 0;
return $(this).fadeTo(speed, opacity, callback);
}
});

$(“#foo”).fadeIn(2000).delay(5000).fadeOut(2000);