0

私は次のスクリプトを持っています

 <script>
  $(document).ready(function(){
   $("div.mover").hover(function () {
  $("div.hide1").fadeTo("slow", 0.33);

  $("div.hide1").fadeTo("slow", 1);

},function(){
  $("div.hide1").stop();
});
  });
 </script>

 and html page is

<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
<td><div class="mover"><IMG SRC="images/buttons_full_01.png" ></div></td>
 </tr>
 <tr>
<td><div class="mover"><IMG SRC="images/buttons_full_02.png"></div></td>
 </tr>
<tr>
<td><div class="mover"><IMG SRC="images/buttons_full_03.png"></div></td>
</tr>
</table>

私の機能は、ボタンの上にマウスを置くと背景をフェードすることです

しかし、すべてのボタンの上にマウスを置いてマウスを離した後、ボタンのアニメーションがすべてのトランザクションを完了するまで続行すると問題が発生します。

私が欲しいのは：マウスがボタンのアニメーションを左にすると、 $("div.hide1").fadeTo("slow", 1); になります。そして停止

4

1 に答える 1

4

マウス ポインターが 2 番目 (または 3 番目) の "mover" div にドラッグされない限り、最初の関数は正常に機能します。その場合、次のようにいくつかのアニメーションがキューに入れられることがあります。

mover1.hover-over()
mover2.hover-over()

デフォルトでは、呼び出しstopは現在のアニメーションのみを終了します。最初のムーバーに対して開始されたアニメーションであり、2 番目のムーバーに対してキューに入れられたアニメーションではありません。

を呼び出すときにアニメーション キューをクリアすることで、追加のアニメーションが実行されないようにすることができますstop。これは、オプションのパラメータを受け入れますclearQueue。

$(document).ready(function(){     
    $("div.mover").hover(function () {
        $("div.hide1").fadeTo("slow", 0.33).fadeTo("slow", 1);
    }, function(){
        // Added stop parameters and added an additional fadeTo,
        // to make sure we get back to 100% opacity.
        $("div.hide1").stop(true).fadeTo("slow", 1);
    });
});
于 2009-10-21T15:52:36.177 に答える