JQuery Fadein Stop - PullRequest
Новая
       10

JQuery Fadein Stop

0 голосов
/ 21 октября 2009

У меня есть следующий скрипт 

 <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); и остановка

1 Ответ

4 голосов
/ 21 октября 2009

Ваша начальная функция работает нормально до тех пор, пока указатель мыши не перетянется в течение второго (или третьего) 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);
    });
});
...