Given a number of '.hovertarget' divs on a page, the mouseover/mouseout events below seem to be firing synchronously - i.e. if you quickly move the mouse from one item (A) to another (B), the B fade-in will not start until the A fade-out has completed. If you do this quickly you then have a sequence of fade-in/outs which play for a few seconds. This is not the behaviour I want. How do I change this so that the events are independent of one another?
I'm using jquery 1.6.2
$(".hovertarget").live('mouseover mouseout', function(event) {
var child = $(event.target).find(".targetchild");
if (event.type == 'mouseover') {
child.fadeIn(200);
} else {
child.fadeOut(200);
}
});
HTML This applied to (as requested):
<div class="hovertarget" id="s1"><div class="targetchild"></div></div>
<div class="hovertarget" id="s2"><开发者_运维百科;div class="targetchild"></div></div>
You would have to stop the previous animation if it wasn't completed yet. Animations go in a queue unless you tell it to stop the current animation and clear the queue. You can add the stop() command like this:
$(".hovertarget").live('mouseover mouseout', function(event) {
var child = $(event.target).find(".targetchild");
if (event.type == 'mouseover') {
child.stop(true, true).fadeIn(200);
} else {
child.stop(true, true).fadeOut(200);
}
});
See the doc for .stop() for more info on the parameters.
Use
child.stop(true, true).fadeIn(200);
and
child.stop(true, true).fadeOut(200);
精彩评论