JavaScript transparency state control?

Question

JavaScript

Good morning, habr!
The task that faces me is simple and as old as the world - an animated change from one picture to another when you hover the mouse. The pictures have the same dimensions, one is just a button, the other is a button with a "glow" (hover state), the buttons are absolutely positioned and are "in each other". In the primitive, the task is solved by the following lines of jQuery code:

$('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/>

But this approach has 1 big problem - events are called and queued regardless of the current state of the element, that is, several mouse hovering over the element causes the element to “blink”. The question is how to track the current state of the element and thus not include its processing if the transparency of the picture is currently changing?

Answer 1

:animated
.stop()

Answer 2

Um… the dumbest option: before the start of the animation, set some variable to true, and at the end to false. Already on the basis of the most stupid option, control what kind of animation is now (control highlighting or not), and if necessary (if the mouse went beyond the control during the lighting animation), start the reverse animation.

Answer 3

A little off topic, but I would not change the second element. We just set a larger z-index to the hidden one, and we “appear” it. Accordingly, it will close the bottom one. And so in the intermediate state, when both have 50%, the background will show through by 25%.

Answer 4

I suggest this: add the li class .animated. We delete the class before the animation, and return it after the animation. And for mouseover change the selector from "div#left li" to "div#left li.animated"