1秒後にli上をホバーするとホバー上にポップアップが表示されます

Question

私はliのホバー上で内側divを表示しようとしています。私はフェードインとフェードアウトを行っていますが、問題は、すべてのフェードインで効果的にすべてを動かすときです。私が1秒間liにマウスを置いたときに表示されるべき場所と、1秒前にその要素を残すと、それはフェーディン効果を表示すべきではありません。

<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> 

私はstop（）、delay（）も使用しようとしましたが、成功しませんでした。ついに、私は時間間隔でやろうとしましたが、私のコードは動作しなくなりました。

Answer 1

は、変数名の前に窓を追加することで、この問題を解決することができました参照してください。

var myTimeout; 

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

Answer 2

あなたはこのjqueryのスクリプトを使用することができます。

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

はDEMO