jQueryアニメーションキューと.stop（真）

最初のオフ - 最終目標は、jQueryを学ぶための独自のドロップダウンメニューを作成することです。マウスをナビゲーションボタンの上または下に移動するのが速すぎると、アニメーションキューが構築され、停止後数秒間アニメーションが継続されます。私はを示すいくつかのフォーラムスレッドを発見しました。停止（真）は、jQueryアニメーションキュービルドアップの問題の解決策です。しかし、ステートメント内で複数のアニメーションを使用する場合は、私の問題を解決していないようです。ここでjQueryアニメーションキューと.stop（真）

はあなたがslidedown /アップパーツを停止するために、追加の.stop(true,true)を追加する必要があるコード（私はCSSを省略しました。）

<html> 
<head> 
<title>My First DropDown Menu</title> 
<script language="javascript" src="js/jquery-1.7.1.min.js"></script> 
<script language="javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> 
<link rel="stylesheet" type="text/css" href="css/menu.css" /> 

<script language="javascript"> 
    $(document).ready(function() { 
     $("div.bSlider ul li").hover(function() { 
      $(this).stop(true, true).animate({ backgroundColor: "#898989", color: "#d01d33" }, 500, function() {}).find("ul").slideDown(200, function(){}); 
     }, function() { 
      $(this).stop(true, true).animate({ backgroundColor: "#d01d33", color: "#ffc074"}, 0, function() {}).find("ul").slideUp(100, function(){}); 
     }); 
    }); 
</script> 

</head> 

<body> 
<div class="bSlider"> 
    <ul> 
     <a href="#"><li>Menu Item #1</li></a> 
     <a href="#"><li>Menu Item #2</li></a> 
     <a href="#"><li>Menu Item #3</li></a> 
     <a href="#"><li>Menu Item #4</li></a> 
     <a href="#"><li>Menu Item #5 
      <ul> 
       <a href="#"><li>Sub-menu Item #1</li></a> 
       <a href="#"><li>Sub-menu Item #2</li></a> 
       <a href="#"><li>Sub-menu Item #3</li></a> 
       <a href="#"><li>Sub-menu Item #4</li></a> 
      </ul> 
     </li></a> 
     <a href="#"><li>Menu Item #6</li></a> 
    </ul> 
</div> 
</body> 

</html>

出典

2012-01-10 Jake

です。

http://jsfiddle.net/Tentonaxe/kZ78R/

$(document).ready(function() { 
    $("div.bSlider ul li").hover(function() { 
     $(this).stop(true, true).animate({ backgroundColor: "#898989", color: "#d01d33" }, 500, function() {}).find("ul").stop(true,true).slideDown(200, function(){}); 
    }, function() { 
     $(this).stop(true, true).animate({ backgroundColor: "#d01d33", color: "#ffc074"}, 0, function() {}).find("ul").stop(true,true).slideUp(100, function(){}); 
    }); 
});

編集：追加情報

.stop()だけではない、それは子供たちの、選択された要素にアニメーションを停止しますので、あなたが二.stop()必要な理由があります。 <ul>は選択された要素の子であるため、アニメーションは停止されませんでした。

出典

2012-01-10 16:38:15

jQueryアニメーションキューと.stop（真）

答えて

関連する問題