Why are these jquery events firing synchronously?

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);