Monitoring the state of the transparency JavaScript

0 like 0 dislike
3 views
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});
$('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);
});

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?
by | 3 views

4 Answers

0 like 0 dislike
by
0 like 0 dislike
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.
by
0 like 0 dislike
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%.
by
0 like 0 dislike
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"
by

Related questions

0 like 0 dislike
3 answers
0 like 0 dislike
1 answer
0 like 0 dislike
2 answers
0 like 0 dislike
2 answers
0 like 0 dislike
1 answer
110,608 questions
257,186 answers
0 comments
1,105 users