Tariq Husain Tariq Husain - 11 months ago 47
Javascript Question

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

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.

Answer Source

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