jQuery .fadeOut(); .fadeIn(); spam bug?

I don't know if this is possible, but I have 3 DIV's that have fadeIn and Out applied on them. Like so:

    $('.boxHolder1').hover(function() {
        $('img.top1').fadeOut(400);
    },function() {
        $('img.top1').fadeIn(400);
    });
    $('开发者_JS百科.boxHolder2').hover(function() {
        $('img.top2').fadeOut(400);
    },function() {
        $('img.top2').fadeIn(400);
    });
    $('.boxHolder3').hover(function() {
        $('img.top3').fadeOut(400);
    },function() {
        $('img.top3').fadeIn(400);
    });

My question.

is there anyway to make this code more efficient, and when I spam over the DIV's with my mouse, I get a lag and the DIV's just fadeIn and randomly, like its recorded X hover's and applies the code accordingly.

You should use the stop function in jQuery to cease any previously-running animations:

$('.boxHolder1').hover(
    function() { $('img.top1').stop().fadeOut(400); },
    function() { $('img.top1').stop().fadeIn(400); });
$('.boxHolder2').hover(
    function() { $('img.top2').stop().fadeOut(400); },
    function() { $('img.top2').stop().fadeIn(400); });
$('.boxHolder3').hover(
    function() { $('img.top3').stop().fadeOut(400); },
    function() { $('img.top3').stop().fadeIn(400); });

Yes, event handler calls are queued. That is certainly not a bug.

In your callback, you can use stop() to stop any currently-running animation. Be sure to pass true as the first argument to cancel queued ones too, and true as the second argument to stop the currently-running animation immediately whilst leaving it with its target properties.

$('.boxHolder3').hover(function() {
    $('img.top3').stop(true, true).fadeOut(400);
},
function() {
    $('img.top3').stop(true, true).fadeIn(400);
});

You won't get this any more "efficient", though you might be able to reduce code duplication with the cunning use of variables.

You can stop the animation before any FADEIN/FADEOUT.

Ex.

$('img.top1').stop(true,true).fadeOut(400);

It will clear the queue and finish the animation immediately. Change both parameters of stop() function to fit your needs.