3

jqueryとCSSを使用して、マウスをそれぞれに合わせたときに選択されるボタンを示すために使用しているナビゲーションサイドバーのボタンをアニメーション化しようとしています。

現在、CSSの私のコードは次のように表示されます。

#navbutton {position:relative; width:178px; height:35px; border:1px #FFF solid; z-index:+3; font-family:'Capriola', sans-serif; font-size:18px; text-align:center;}

#navbutton.button {color:#77D; background-color: #F0B0D0;}
#navbutton.button_hover {color:#66C; background-color: #FCF; padding:10px;}

そして私のjquery：

<script type="text/javascript">
$(document).ready(function(){

$("#sidebar div").mouseenter(buttonHover) 

function buttonHover(){
    $(this).stop().switchClass('button','button_hover',500);
    }

$("#sidebar div").mouseleave(button)

function button(){
    $(this).stop().switchClass('button_hover','button',500);
    }   

});
</script>

アニメーションの各部分に.stop（）を追加する前は、マウスを各ボタンの上に移動してから削除するたびに、アニメーションキューがスタックしていました。.stop（）が適用されたので、アニメーション中にマウスをボタンから離すと、ボタンがフリーズしてアニメーションの途中の状態のままになり、ページにカーソルを合わせると修正できなくなります。元のマウスリーブ状態に戻るのではなく、リロードされます。

私が読んだすべてのことから、これは当てはまらないはずです。.stop（）が適用されると、アニメーションキューが壊れてしまう理由を誰かが知ることができるでしょうか？

4

2 に答える 2

3

現在のアニメーションの最後に移動するために使用.stop(true,true)します。それ以外の場合は、どこにいても停止します。

http://api.jquery.com/stop/

于 2012-12-09T04:40:44.630 に答える
0

Firefoxで動作しているように見える次のコードを試しました。実際には、アニメーションの途中でマウスをオフまたはオンにすると、右が壊れます。他の人の答えが解決策のように見えます。

<html><head>

<style type="text/css">
:button {position:relative; width:178px; height:35px; border:1px #FFF solid; z-index:+3; font-family:'Capriola', sans-serif; font-size:18px; text-align:center;}
.effect {color:#77D; background-color: #F0B0D0;}
.effect_hover {color:#66C; background-color: #FCF; padding:10px;}
</style>

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$(":button").mouseenter(buttonHover) 
function buttonHover(){
    $(this).stop().switchClass('effect','effect_hover',500);
    }

$(":button").mouseleave(button)
function button(){
    $(this).stop().switchClass('effect_hover','effect',500);
    }   

});

</script>

</head><body>

<input type="button" value="Test Button">

</body></html>
于 2012-12-09T04:58:05.373 に答える