[jQuery] More efficient animation for multiple elements

[jQuery] More efficient animation for multiple elements


A cool effect I picked up from my Mootools days was the Elements.FX,
see a demo here: http://demos111.mootools.net/Fx.Elements
Basically it's a bunch of elements, you mouse over one and it gets
larger while all the others shrink. A pretty cool effect for
navigation menus.
Here's what I wrote in jQuery, and it works fine, but it seems very
inefficient. I noticed with larger lists, it seems to chug a bit
(especially in IE!)
$(document).ready(function() {
    var subNormal=5, subSmall=3, subLarge=15, subSpeed=350,
subTrans="easeOutExpo", j=[];
    var subNavs = $("#subNavigation>li>a").each(function(i){
        j[this] = i;
        $(this).hover(function(){
            subNavs.each(function(){
                whichPadding = (j[this]==i) ? subLarge : subSmall;
                $
(this).animate({paddingLeft:whichPadding,paddingRight:whichPadding},subSpeed,subTrans).dequeue();
            });
        }, function(){
    
subNavs.animate({paddingLeft:subNormal,paddingRight:subNormal},subSpeed,subTrans).dequeue();
        });
    });
});
Any ideas on how to re-write this in a more efficient way?