Вопрос
у меня есть следующий скрипт
<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); и остановиться
Решение
Ваша начальная функция работает нормально, если указатель мыши не перетаскивается в течение второй (или третьей) " движущей силы " дела. Когда это произойдет, вы можете получить несколько анимаций в очереди, например:
mover1.hover-over()
mover2.hover-over()
По умолчанию вызов 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);
});
});