How to show div for 10 seconds and then hide it

Question

I have div block which comes on a mouseover of another div.

div1 img // mouse over shows div2.

I want to show div2 for 10 seconds and then hide it , can you please tell me how to achive this

Thanks

Answer 1

Use jQuery's delay(n); method http://api.jquery.com/delay/

 $(function() {
      $("#div1 img").hover(function(){
        $("#div2").show().delay( 10000 ).hide(0);
      });
    });

Answer 2

$("#div1").mouseenter(function() {
    var $div2 = $("#div2");
    if ($div2.is(":visible")) { return; }
    $div2.show();
    setTimeout(function() {
        $div2.hide();
    }, 10000);
});

Another way to go:

$("#div1").mouseenter(function() {
    var $div2 = $("#div2");
    if ($div2.data("active")) { return; }
    $div2.show().data("active", true);
    setTimeout(function() {
        $div2.hide().data("active", false);
    }, 10000);
});