Jquery wait 3 seconds after mouseover

Question

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?

Possible duplicate of [If mouse over for over 2 seconds then show else dont?](http://stackoverflow.com/questions/11263636/if-mouse-over-for-over-2-seconds-then-show-else-dont) — Eaten by a Grue, Jul 09 '16 at 17:45

score 1 · Answer 1 · answered Jul 09 '16 at 17:32

1

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

answered Jul 09 '16 at 17:32

1sloc

1,140
5
12

then if i mouseout in that 3000 it will still show it – Jon Snow's papa Jul 09 '16 at 17:33
The function inside setTimeout is immediately "activated" when you do a mouseover, but only executed after 3 seconds. No matter where your mouse is then. – 1sloc Jul 09 '16 at 17:34
That is why i am looking for other way – Jon Snow's papa Jul 09 '16 at 17:38
You might want to clarify what you're really after. – 1sloc Jul 09 '16 at 17:38
I did not get what you said – Jon Snow's papa Jul 09 '16 at 17:42

score 1 · Answer 2 · answered Jul 09 '16 at 17:33

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

mdameer · Accepted Answer · 2016-07-09T17:46:23.973

0

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.

edited Jul 09 '16 at 17:46

answered Jul 09 '16 at 17:43

mdameer

1,540
2
13
17

You should change $(this).mousleave to$(".y_e").mouseleave – Jon Snow's papa Jul 09 '16 at 17:44

Jquery wait 3 seconds after mouseover

3 Answers3