jquery 淡入淡出停止

发布于 2024-08-08 06:26:18 字数 911 浏览 2 评论 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("慢", 1); 并停止

原文

i have following script

 <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>

my function is to fade the background on mouse over of button

but the problem if i hover mouse over all buttons and after mouse left the buttons
animation keep continue till it complete its all transactions.

what i want is: as mouse left the buttons animation come to
$("div.hide1").fadeTo("slow", 1);
and stop

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

舂唻埖巳落 2024-08-15 06:26:18

只要鼠标指针没有被拖过第二个（或第三个）“移动器”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);
    });
});

Your initial function works fine as long as the mouse pointer isn't dragged out over a second (or third) "mover" div. When that happens, you may get several animations queued up like this:

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

By default, calling stop only terminates the current animation - the animation initiated for the first mover, not the animation queued for the second mover.

You can prevent the additional animations from running by clearing the animation queue when you call stop, which accepts an optional parameter 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);
    });
});

回复收藏 0 原文

~没有更多了~