Как заставить div появляться через пару секунд после наведения мыши с помощью jQuery?

Question

Также должно появиться изображение, показывающее процесс загрузки. В mouseout, div должен исчезнуть. Мой код:

$("a").mouseenter(function() {
    var link = $(this).attr("href");
    $("#flash").show();
    $("#flash").fadeIn(3000).html("<img src='load.gif' />");
    $("#div"+link).slideDown(100);
    $("#flash").fadeOut();
});

$("a").mouseout(function() {
    $("#flash").fadeOut(1000);
}); 

Answer 1

Взгляните на метод jQuery .delay():

Это в основном похоже на setTimeout, но позволяет создавать цепочки.

Answer 2

$("my-element").mouseenter(function(){
$(this).delay(2000).fadeIn();
});

Answer 3

Полагаю, вы хотите, чтобы часть ссылки div + скользила вниз через пару секунд? setTimeout () подходит для этого.

$("a").mouseenter(function(){

        var link = $(this).attr("href");
        $("#flash").show();
        $("#flash").fadeIn(3000).html("<img src='load.gif' />");

        setTimeout(function() {
           $("#div"+link).slideDown(100);
        }, 2000);

        $("#flash").fadeOut();
});

ОБНОВЛЕНИЕ: Проблема с setTimeout состоит в том, что вы не можете отменить его, когда он находится в очереди.Вместо этого вы можете попробовать setInterval, потому что он возвращает идентификатор таймера, который вы можете вызвать clearInterval позже.

var timerId = null;

$("a").mouseenter(function(){
    var link = $(this).attr("href");
    $("#flash").show();
    $("#flash").fadeIn(3000).html("<img src='load.gif' />");

    timerId  = setInterval((function() {
                   clearInterval(timerId);
                   $("#div"+link).slideDown(100);
               }, 2000);

    $("#flash").fadeOut();
});

$("a").mouseout(function(){

    clearInterval(timerId);
    $("#flash").fadeOut(1000);

});

Важно, чтобы вы вызывали clearInterval, чтобы вызов функции не повторялся.