CODEWITHSUNDEEP
javascriptjqueryhover
Robin71
Robin71

Reputation: 403

Show and hide content on hover with delay

I need to do one thing. I have element on webside. When user hover the mouse on this item i need to for example display alert. But with delay: When user hover the mouse on item and after one second mouse is still on item the alert will display. I can do it but i want to do the same when mouse leave the same item (when mouse leave item and after one second is still outside item). Now i use this code but of course it dosen't work with leaving

$('.test').hover(function(){
  mytimeout = setTimeout(function(){
    alert("enter");
  }, 1000);
}, function(){
     clearTimeout(mytimeout);
});


$('.test').mouseleave(function() {
  alert("escape");
});

Of course i'm not going to use this with alerts ;) I have no idea how to do it. Hover in hover? Or use something else? Thank you for your help and sorry for my english.

Upvotes: 2

Views: 3074

Answers (4)

volodymyr
volodymyr

Reputation: 11

Try this one. Just need to reset timeout on each hover event.

(function(){
        var mytimeout = null;
        $('.test').hover(function(){
            clearTimeout(mytimeout);
            mytimeout = setTimeout(function(){
                alert("enter");
            },1000);
        });
    })();

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Working fiddle.

You can follow the same idea in mouseleave if you want, you need just to clear the timer timer_mouseleave on hover event :

var timer_mouseleave;

$('.test').hover(function(){
      clearTimeout(timer_mouseleave);

      mytimeout = setTimeout(function(){
        alert("enter");
      }, 2000);
}, function(){
     clearTimeout(mytimeout);
});

$('.test').mouseleave(function() {
      timer_mouseleave = setTimeout(function(){
        alert("escape");
      }, 2000);
});

Hope this helps.

Upvotes: 0

lshettyl
lshettyl

Reputation: 8181

You'd need timeouts in both blocks, enter/leave, such as below:

var $demo = $("#demo");
var timer;

$('.test').hover(function() {
    //Clear timeout just in case you hover-in again within the time specified in hover-out
    clearTimeout(timer);
    timer = setTimeout(function() {
        $demo.text("enter");
    }, 1000);
}, function() {
    //Clear the timeout set in hover-in
    clearTimeout(timer);
    timer = setTimeout(function() {
        $demo.text("exit");
    }, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="test">Hover me!</button>

<div id="demo"></div>

Upvotes: 2

Gregg Duncan
Gregg Duncan

Reputation: 2725

You almost had it. The jquery hover function takes two parameters an onHoverStart (or onMouseOver) handler and an onHoverStop (or onMouseLeave) handler. You just need to add the alert to the onHoverStop handler.

$('#test').hover(function(){
  setTimeout(function(){
    alert("enter");
  }, 1000);
}, function(){
  setTimeout(function(){
    alert("escape");
  }, 1000);
});

Upvotes: 1

Related Questions