How to set up an waiting time before an animation begins in jQuery?

i have this setup: http://jsfiddle.net/patrioticcow/XnnvD/

what i want to accomplish is when i hover over the black image the animation to wait 2 or 3 seconds before starts.

seems simple but i am a bit confuse.

here is the code:

 <div class="friends_row">
    <div class="friend">
    <div class="friends1" id="friend_pic1"></div>
    <div class="friends-name1" id="fname_1">Alice</div>
    </div>

$(function() {
$("div#friend_pic1").hover(function() {$("div#fname_1").slideUp();});
$("div#friend_pic1").mouseout(function() {$("div#fname_1").slideDown();});
});


.friends-na开发者_C百科me1{background-color: #0072FF;color: #FFFFFF;font-weight: bold;height:    20px;margin-left: 10px;margin-top: 10px;position: absolute;text-align: center;width: 51px;
}

.friends1{background-color: #000000;height: 80px;width: 51px;float: left;margin: 10px;
}

thanks

I think you want to use the delay method:

$(function() {
$("div#friend_pic1").hover(function() {$("div#fname_1").delay(2000).slideUp();});
$("div#friend_pic1").mouseout(function() {$("div#fname_1").delay(2000).slideDown();});
});

See jsFiddle.

like this: http://jsfiddle.net/XnnvD/1/ ?

setTimeout is your friend.

Working Example

$("div#friend_pic1").hover(function({setTimeout(function()$("div#fname_1").slideUp();},2000);});