Show popup on hover only if i hover on li after 1 second

1
votes

I'm trying to show inner div on hover on li. I'm doing fadeIn and fadeOut effect but the problem is when I hover quickly on all li fadeIn effect work for all. Where it should show only if I hover on li for 1 second and if I leave that element before one second it shouldn't show fadein effect.

<script type="text/javascript">
    $(document).ready(function(){

       var _changeInterval = null;
        $( ".badge_icon" ).hover(function() {
             clearInterval(_changeInterval)

             _changeInterval = setInterval(function() {
                $(this).find(".badges_hover_state").fadeIn(500);
            }, 1000);

        },function() {

             $(this).find('.badges_hover_state').fadeOut(500);

        }); 
      });
</script>

I have tried to use stop(), delay() also but didn't get success. At last I tried to do with time interval but now my code has stopped working.

2
javascriptjqueryhtmlhover

2 Answers

1
votes

you could use this jquery script:

var myTimeout;
$('#div').mouseenter(function() {
    myTimeout = setTimeout(function() {
        //Do stuff
    }, 1000);
}).mouseleave(function() {
    clearTimeout(myTimeout);
});

See the DEMO

1
votes

Was able to solve this issue by adding window in front of variable name.

var myTimeout;

    $('.div').mouseenter(function() {
      window.el = $(this);
        myTimeout = setTimeout(function() {
           el.css("width","200px");
        }, 1000);
    }).mouseleave(function() {
        clearTimeout(myTimeout);
        el.css("width","100px");
    });