Question

I have been trying to learn how to write faster more efficient jQuery and would like to get some insight on how I should write this function so it will work faster. Should i use variables, I am most concerned with speed on a page so what will run more optimal cross browser and why is the answer I would like to see.

    $("#div-one, #div-two").find('tr').hover(function(){
    $(this).find('a').stop().animate({color:"#FFF"}, 'fast');
    $(this).stop().animate({
        backgroundColor:"#7DBE36"
    }, 'fast');
}, function(){
    $(this).find('a').stop().animate({color:"#000"}, 'fast');
    $(this).stop().animate({
        backgroundColor:"#FFF"
     }, 'fast')
});

Thanks all in advance.

Answer 1

You can use .delegate() here, like this:

$("#div-one, #div-two").delegate('tr', 'mouseenter', function(){
    $(this).stop().animate({ backgroundColor:"#7DBE36" }, 'fast')
           .find('a').stop().animate({ color:"#FFF" }, 'fast');
}).delegate('tr', 'mouseleave', function(){
    $(this).stop().animate({ backgroundColor:"#FFF" }, 'fast')
           .find('a').stop().animate({ color:"#000" }, 'fast');
});

This attaches a pair of handlers on #div-one and #div-two instead of a pair per <tr> inside each, this means quicker binding and just relies on event bubbling for listening to the events. Also inside the function you can chain, no need to create another $(this) jQuery object.