CODEWITHSUNDEEP
jquery
kobe
kobe

Reputation: 15835

How to show div for 10 seconds and then hide it

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

Upvotes: 20

Views: 69360

Answers (6)

FatherStorm
FatherStorm

Reputation: 7183

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

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

Upvotes: 20

user113716
user113716

Reputation: 322612

The accepted answer is the only good one here.

I'm leaving an answer because most of the others fail for various reasons.

If you want to use .delay(), the item delayed needs to be part of the queue. The .hide() method is not. But if you give .hide() a duration, it is.

So you can do this:

var $div2 = $('#div2');

$('#div1').mouseenter(function() {
    $div2.show().delay( 10000 ).hide( 0 );
});

The 0 duration makes .hide() part of the queue. You don't want to use .hover() because it will fire once for mouseenter and once for mouseleave. This is not what was wanted.

Some of the answers using setTimeout() fail because if there are several mouseenter events, then several setTimeout() calls are made. The accepted answer gets around this.

Upvotes: 13

hunter
hunter

Reputation: 63562

$(function() {
    $("div1 img").hover(
        function() { //mouse over show div
            $("div2").show(); //.delay(10000).fadeOut();
        },
        function() { // mouse out, start timer to hide
            //$("div2").delay(10000).fadeOut();
        }
    );    
});

Upvotes: 3

Šime Vidas
Šime Vidas

Reputation: 186103

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

Upvotes: 35

Harmen
Harmen

Reputation: 22456

var $div2 = $('#div2');


$('#div1').mouseover( function(){
  $div2.show();

  setTimeout( function(){
    $div2.hide();
  }, 1000*10);

});

Upvotes: 2

zzzzBov
zzzzBov

Reputation: 179264

as part of the mouseover function:

setTimeout(function(d){
  item.hide();
}, 10000);

This assumes var item is the jquery object of the div you want to hide. The parameter 10000 is the delay in milliseconds. 10s * 1000ms/1s = 10000ms

Upvotes: 8

Related Questions