Monitoring the state of the transparency JavaScript

Good morning, Habr!
The task that stands before me is simple and as old as the world — animated change one image to another on mouse over. Pictures are the same size, one is just a button, another button with "glow"(hover state), the button is completely pozitsionirovanie and are "each other". The primitive task is solved in such lines of code in jQuery:
$('div#left ul li').css({opacity: 0.0});<br> $('div#left ul li:first').css({opacity: 1.0});<br> $("div#left li").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> $("div#left li").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 — the events are triggered and queued regardless of the current state of the element, there are a few hovers mouse over the item called "the comparison" element. The question is how to monitor the current state of the element and thereby enable the processing, if the transparency of the images changed?
October 14th 19 at 12:09
4 answers
October 14th 19 at 12:12
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();
});
- Alessandra1 commented on October 14th 19 at 12:15
October 14th 19 at 12:14
Um... the most stupid option: before the beginning of the animation to some kind of score variable to true, and at the end to false. On the basis of the most stupid options to control what is now the animation (backlight control or not), and if necessary (if animation highlighting the mouse has gone beyond control) start reverse animation.
October 14th 19 at 12:16
A little off topic, but I would second element opacity not changed. Just more hidden z-index set, and it "appeared". Accordingly, it will close by itself lower. And so in the intermediate state when both have 50%, will be through the background by 25%.
Thanks, but, depending on your pictures the option of transparency to the customer like it more =) - Alessandra1 commented on October 14th 19 at 12:19
October 14th 19 at 12:18
I dabavljaet li class .animated. Before the animation class is removed after the animation is returned. And for mouseover change the selector "div#left li" to "div#left li.animated"
Although, of course it would be logical vistalite class during the animation, not to remove it as I suggested. But in this case, I don't know how to look like a selector for the li, not imesa animation class. - Alessandra1 commented on October 14th 19 at 12:21
Let no of bicycles. lacki wrote is true. - Terrell_Prohas commented on October 14th 19 at 12:24
Yeah, let's. I did not see the answer when lacki wrote about the stop did not know. - Tillman commented on October 14th 19 at 12:27

Find more questions by tags jQueryJavaScript