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

Доброе утро, хабр!
Задача, что стоит передо мной проста и стара как мир — анимационная смена одной картинки другой при наведении мышки. Картинки имеют одинаковые размеры, одна — просто кнопка, другая — кнопка со «свечением»(hover state), кнопки абсолютно позиционированны и находятся «друг в друге». В примитиве задача решается такими строками кода на jQuery:
$('div#left ul li').css({opacity: 0.0});
$('div#left ul li:first').css({opacity: 1.0});
$("div#left li").mouseover(function () {
$('div#left ul li:first').animate({opacity: 0.0}, 1000);
$('div#left ul li:last').animate({opacity: 1.0}, 1000);
});
$("div#left li").mouseout(function () {
$('div#left ul li:first').animate({opacity: 1.0}, 1000);
$('div#left ul li:last').animate({opacity: 0.0}, 1000);
});

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