Start function after hover a couple second

Question

I want to fadeIn() after the div is hovered for 1500 mili seconds. How do i need to check that the user is hovering 1500 mili seconds

<div id=bla>Hover this</div>

var bla = $('#bla');

bla.hover(function(){       
        bla.hide().html("HEHE").fadeIn("slow");
});

because setTimeout is showing whenever user hovers, i want to check if its hovers more dan 1500 mili second than show — Inna, Feb 27 '15 at 13:02
[this](http://stackoverflow.com/questions/1273566/how-do-i-check-if-the-mouse-is-over-an-element-in-jquery) may help you — SpringLearner, Feb 27 '15 at 13:03
pure javascript example fiddle [example](http://jsfiddle.net/6yu5bfa2/2/) — Hacketo, Feb 27 '15 at 13:10

R3tep · Accepted Answer · 2015-04-02T13:29:30.970

5

It's possible to use setTimeout, just clear the setTimeout if the user leave bla like this :

var timeout,
bla = $('#bla');

bla.hover(
  function () {
    timeout = setTimeout( function() {       
      bla.hide().html("HEHE").fadeIn("slow")
    }, 1500);
  }, 
  function () {
    clearTimeout(timeout);
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bla">Text</div>

edited Apr 02 '15 at 13:29

answered Feb 27 '15 at 13:06

R3tep

12,512
10
48
75

2

you can put the timeout in bla, like this `bla.timeout = x;` after creating it... then you can clear the timeout in this way: `clearTimeout(bla.timeout);` – Tommaso Bertoni Feb 27 '15 at 13:10

score 4 · Answer 2 · answered Feb 27 '15 at 13:09

You cas use a custom flag coupled with setTimeout and hoverOut (http://api.jquery.com/hover/)

(function() {                                   // Scope protected
  var bla = $('#bla');                          // Your div
  var timeout;                                  // Variable to store the setTimeout id

  bla.hover(function() {                        // Hover can take two callbacks
    timeout = setTimeout(function() {           // On hover, we setTimeout and store it
      bla.hide().html("HEHE").fadeIn("slow");   // 1500ms later, we fadeIn
    }, 1500);
  }, function () {                              // Unhover callback
    clearTimeout(timeout);                      // We simply clear the timeout
  });
})();                                           // Directly calling the scope

We set a timeout callback on hover but we clear it on unhover.

Start function after hover a couple second

2 Answers2