Как настроить время ожидания до начала анимации в jQuery?

Question

У меня есть эта настройка: http://jsfiddle.net/patrioticcow/XnnvD/

Что я хочу сделать, так это когда я наведя курсор на черное изображение, анимация ждет 2 или 3 секунды перед запуском.

кажется простым, но я немного запутался.

вот код:

 <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-name1{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;
}

спасибо

Answer 1

Я думаю, вы хотите использовать метод delay:

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

См. JsFiddle.

Answer 2

setTimeout - ваш друг.

Рабочий пример

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

Answer 3

вот так: http://jsfiddle.net/XnnvD/1/?