How do I make a div appear after a couple of seconds after mouseover with jQuery?

An image should also appear to show the loading process. I开发者_JS百科n mouseout, the div should disappear. My code:

$("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);
}); 

---

Have a look at the jQuery's .delay() method:

It's basically like setTimeout but allows chaining.

---

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

---

I assume you want the div+link part to slide down after a couple of seconds? setTimeout() is good for that.

$("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();
});

UPDATE: The problem with setTimeout is you can't cancel it once it's queued up. Instead you can try setInterval, because it returns an id of the timer that you can call clearInterval on later.

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);

});

It's important that you call clearInterval, so that the function call doesn't keep repeating.