Delphinidin

Because animations are usually a series of events occurring within a given timeframe, being able to delay elements to create a timed animation is a basic requirement. jQuery offers a way to add delay to an animation with the delay method.
The delay method was added recently to version 1.4 of the jQuery library to allow you to add a delay to the methods that follow it, which are attached by chaining. The delay method is only to be used with effects in the jQuery library. If you are looking for a more flexible timer function, give the native JavaScript setTimeout function a shot. If you are looking to display a message to your users and have it disappear after a certain amount of time, the delay effect is the perfect solution. In this example, I want to display a message when the user hovers their mouse pointer over a link. If the user's mouse leaves the link, after 10 seconds, I want the message to fade out.

1. Set up HTML for the tooltip element that contains the message and the show-tip link that the user mouses over to see the message.

<a href="#" class="show-tip">Learn more about Peaches</a>
<div class="tool-tip">
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
</div>

2. Next, set up a hover event. The hover event toggles between the mouseenter and moueseleave events. In the first statement, the mouseover, select the tooltip message and fade it in over a duration of 900 milliseconds.

$('.show-tip').hover(
function(){
$('.tool-tip').fadeIn(900);
},
function() {
});

3. In the second statement, the mouseleave, select the tooltip message, but this time, delay it for 10,000 milliseconds (10 seconds) and then fade it out over a duration of 900 milliseconds.

$('.show-tip').hover(
function(){
$('.tool-tip').fadeIn(900);
},
function() {
$('.tool-tip').delay(10000).fadeOut(900);
});