Question

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);
    });
    $('.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.

Answer 1

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