jQuery的淡入停止

Question

我有以下腳本

<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）; and stop

Answer 1

只要鼠標指針沒有通過第二個（或第三個）「移動器」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); 
    }); 
});