Контроль состояния прозрачности JavaScript?

Question

[skvot]

Доброе утро, хабр!

Задача, что стоит передо мной проста и стара как мир — анимационная смена одной картинки другой при наведении мышки. Картинки имеют одинаковые размеры, одна — просто кнопка, другая — кнопка со «свечением»(hover state), кнопки абсолютно позиционированны и находятся «друг в друге». В примитиве задача решается такими строками кода на jQuery:

$('div#left ul li').css({opacity: 0.0});<br/>
$('div#left ul li:first').css({opacity: 1.0});<br/>
$(&quot;div#left li&quot;).mouseover(function () {<br/>
 $('div#left ul li:first').animate({opacity: 0.0}, 1000);<br/>
 $('div#left ul li:last').animate({opacity: 1.0}, 1000);<br/>
});<br/>
$(&quot;div#left li&quot;).mouseout(function () {<br/>
 $('div#left ul li:first').animate({opacity: 1.0}, 1000);<br/>
 $('div#left ul li:last').animate({opacity: 0.0}, 1000);<br/>
});<br/>

Но у данного подхода есть 1 большая проблема — события вызываются и ставятся в очередь вне зависимости от текущего состояния элемента, то есть несколько наведений мышки на элемент вызывают «перемигивание» элемента. Вопрос состоит в том, как отследить текущее состояние элемента и тем самым не включать его обработку, если в данный момент прозрачность картинки изменяется?

Answer 1

[lacki]

:animated
.stop()

Comments

[lacki]

We can create a nice fade effect without the common problem of multiple queued animations by adding .stop(true, true) to the chain:

$('#hoverme-stop-2').hover(function() {
  $(this).find('img').stop(true, true).fadeOut();
}, function() {
  $(this).find('img').stop(true, true).fadeIn();
});

Answer 2

[Олег Матрозов]

Эм… самый тупой вариант: перед началом анимации забивать некую переменную в true, а по окончанию в false. Уже на основе самого тупого варианта контролировать, какая именно сейчас анимация (подсветка контрола или нет), и при необходимости (если в процессе анимации подсветки мышка ушла за рамки контрола) стартовать обратную анимацию.

Answer 3

[Александр]

Немного не по теме, но я бы второму элементу опасити не менял. Просто скрытому больший z-index ставим, и его «появляем». Соответственно он закроет собой нижний. А так в промежуточном состоянии, когда у обоих по 50%, будет проглядывать фон на 25%.

Comments

[skvot]

Спасибо, но с учетом используемых картинок вариант с прозрачностью заказчику нравится больше =)

Answer 4

[Александр Прокопенко]

Предлагаю так: дабавляем li класс .animated. Перед анимацией класс удаляем, после анимации возвращаем. А для mouseover меняем селектор с «div#left li» на «div#left li.animated»

Comments

[Александр Прокопенко]

Хотя, конечно логичнее было бы высталять класс во время анимации, а не снимать его как предложил я. Но в таком случае, не знаю, как должен выглядеть селектор для li, не имещих класса анимации.

[homm]

Давайте без велосипедов. lacki все верно написал.

[Александр Прокопенко]

Ага, давайте. Я не видел ответа lacki когда писал и про stop не знал.