CODEWITHSUNDEEP
jquery
Jon Snow's papa
Jon Snow's papa

Reputation: 39

Jquery wait 3 seconds after mouseover

I have got this jquery code

$(".y_e").mouseover(function(){
        $(this).children(".Photopreview").show("fast");
        $(this).mouseleave(function(){
            $(this).children(".Photopreview").hide("fast");
        })
});

and this html

     <div class="y_e">
       <div class="Photopreview">
         <img src="../uploads/a.jpg"/>
         <div class="Arrow_down" ></div>
      </div>
     </div>

How can i wait 3 seconds after user mouseovers on y_e?

Upvotes: 0

Views: 496

Answers (3)

mdameer
mdameer

Reputation: 1540

You can use "delay" jquery method like the following code

$(".y_e").mouseover(function(){
    $(this).children(".Photopreview").stop(true,true).delay(3000).show("fast");
});
$(this).mouseleave(function(){
    $(this).children(".Photopreview").stop(true,true).hide("fast");
});

Note: don't register event listener inside other event listener, because this will register multiple listeners for same event type.

Upvotes: 0

SandroMarques
SandroMarques

Reputation: 6534

Try implement setTimeout with an anonymous function

$(".y_e").mouseover(function(){
    setTimeout(function() {
        $(this).children(".Photopreview").show("fast");
        $(this).mouseleave(function(){
            $(this).children(".Photopreview").hide("fast");
        })        
    }, 3000);
});

Upvotes: 1

1sloc
1sloc

Reputation: 1180

You can use setTimeout for waiting purposes.

$('.y_e').mouseover(function() {
  setTimeout(function() {
    // The stuff you want to do when your three seconds are over.
  }, 3000)
});

Upvotes: 2

Related Questions