JQuery FadeIn остановить

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); и stop

Answer 1

Ваша начальная функция работает нормально, пока указатель мыши не перетаскивается на второй (или третий) div «mover». Когда это произойдет, вы можете получить несколько анимаций в очереди, как это:

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); 
    }); 
});