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

只要鼠标指针没有被拖出第二个（或第三个）“移动器”div，您的初始函数就可以正常工作。发生这种情况时，您可能会得到几个动画，如下所示：

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

默认情况下，调用stop仅终止当前动画 - 为先动者启动的动画，而不是为后动者排队的动画。

您可以通过在调用时清除动画队列来阻止其他动画运行，该队列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 回答