Effect Delay Trick

Here is a quick trick for getting an effect to delay without using setTimeout.

Let's say, for example, that I want to show an alert message on the page every time a user clicks on a certain button. But I don't want it to stay there forever; I want it to go away a few seconds later. You know, like the way they do in all of those crazy Web 2.0 sites.

Update

In version 1.4, jQuery introduced a .delay() method that allows you to do the same thing as I show below, but without the hack. If you're using jQuery 1.4 or above, definitely use .delay() instead. It takes one argument, the number of milliseconds to delay. Read more about it in the online documentation

The HTML

Well, first I'll need a message, along with a container for it:

[html]

Alert! Watch me before it's too late!

[/html]

Oh, I should also put my button into the HTML—something like this: <input type="submit" id="show-alert" value="Show Alert" />

The CSS

Now I could also use some stylin' for that quick-alert class:

[css] .quick-alert { width: 50%; margin: 1em 0; padding: .5em; background: #ffa; border: 1px solid #a00; color: #a00; font-weight: bold; display: none; }[/css]

I'll stick that in my stylesheet so that it's ready to be applied to our new, button-generated DIV.

Inserting the Content

On to the code! First, we'll get our message to be inserted when someone clicks on the "Show Alert" button. Let's put the message right after the button, like so:

[js]$(document).ready(function() { $('#show-alert').click(function() { $('

Alert! Watch me before it\'s too late!

') .insertAfter( $(this) ); }); });[/js]

So, basically, what I'm saying here is, upon clicking the <input id="show-alert" /> button, create this div with the class and all the text inside of it, and place it right after the button. Notice the backslash in "it\'s." ~~That keeps jQuery from getting confused~~ That escapes the single quote, which is necessary because otherwise — as Dave Cardwell explains in his comment — "the JavaScript parser would interpret that as the close of the string."

Adding the Effects

So far, so good. Now I'm going to add my .fadeIn() and .fadeOut() effects. And after those are done, I'll remove the div that I just created. No sense keeping it around:

[js]$(document).ready(function() { $('#show-alert').click(function() { $('

Alert! Watch me before it\'s too late!

') .insertAfter( $(this) ) .fadeIn('slow') .fadeOut('slow', function() { $(this).remove(); }); }); });[/js]

Because I put $(this).remove() in the callback of the .fadeOut() method, it occurs after the the fading out is finished.

The Delay

So, here's the thing. The entry's title says that this is a trick, right? Well, I hope it's not a dirty trick, but here goes the full code:

[js]$(document).ready(function() { $('#show-alert').click(function() { $('

Alert! Watch me before it\'s too late!

') .insertAfter( $(this) ) .fadeIn('slow') .animate({opacity: 1.0}, 3000) .fadeOut('slow', function() { $(this).remove(); }); }); });[/js]

Do you see that .animate() method there? I have it animating to a full opacity in 3 seconds. But the div is already at full opacity, so it just sits there looking like it's doing nothing for 3 seconds. Isn't that cute?

Here you go. Try it out for yourself:

I hope you enjoyed the message while it lasted!

Learning jQuery