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?
