Tariq Husain Tariq Husain - 13 days ago 4
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

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