hover mouseleaveでjQuery関数が起こっていません

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コールの中で定義して、まだ動作させることができます。私はそれをどちらの方法でもテストしていません。