jQuery函数没有发生在悬停mouseleave

Question

我试图为我正在工作的网站做一个小动画，但我已经建立它的方式，当我的鼠标移动到容器div上时，动画仍然发生。我怎样才能认识到鼠标实际上并没有悬停？

的HTML代码是：

<div id="badge"> 
    <div id="slogan"> 
     <p>We sell for less!</p> 
    </div> 
    <div id="icon"></div> 
    <div id="name"></div> 
    <div id="TMhold"> 
     <div id="TM"></div> 
    </div> 
</div> 

，这是我使用jQuery：

$("#badge").hover(
    function() { 
     $(this).stop(true,true).animate({width: "250px"}, 760, "easeOutQuart"); 
     setTimeout(function() { 
      $("#TM").stop(true,true).animate({top: "0"}, 500, "easeOutQuart"); 
     }, 500); 
     setTimeout(function(pee) { 
      $('#badge p').stop(true,true).animate({opacity: .99}, 760, "easeOutQuart"); 
     }, 800); 
    }, 
    function() { 
     clearTimeout(pee); 
     $('#badge p').stop(true,true).animate({opacity: 0}, 120, "easeOutQuart"); 
     setTimeout(function() { 
      $('#badge').stop(true,true).animate({width: "90px"}, 900, "easeOutQuart"); 
      $("#TM").stop(true,true).animate({ top: "-13px"}, 500, "easeOutQuart"); 
     }, 300); 
    } 
); 

我读过有关clearTimeout功能，但我不知道是否适用这是我的解决方案。

非常感谢您的帮助或澄清！

Answer 1

我花了一点时间重新安排JavaScript的布局，以帮助查看真正发生的事情，我想我会看到您可能会丢失的东西。 setTimeout方法返回一个值来表示正在设置的计时器。如果你没有捕获这个值，你将无法取消定时器。

而不是调用setTimeout(function(pee)...，将其更改为捕获返回值，然后在clearTimeout调用中使用该值。

var hoverTimerId; 

$("#badge").hover(
    function(){ 
     $(this).stop(true,true).animate({width: "250px"}, 760, "easeOutQuart"); 
     setTimeout(function() { 
      $("#TM").stop(true,true).animate({top: "0"}, 500, "easeOutQuart"); 
     }, 500); 
     hoverTimerId = setTimeout(function() { 
      $('#badge p').stop(true,true).animate({ opacity: .99}, 760, "easeOutQuart"); 
     }, 800); 
    }, 
    function(){ 
     clearTimeout(hoverTimerId); 
     $('#badge p').stop(true,true).animate({opacity: 0}, 120, "easeOutQuart"); 

     setTimeout(function() { 
      $('#badge').stop(true,true).animate({ width: "90px"}, 900, "easeOutQuart"); 
      $("#TM").stop(true,true).animate({top: "-13px"}, 500, "easeOutQuart"); 
     }, 300); 
    } 
); 

注：ID必须在两个handlerIn和handlerOut回调可用的计时器，所以我把它的hover方法调用之外的全局变量。您可以在hover调用中定义它，并让它仍然有效。我还没有测试过这种方式。