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?

Reply via email to