jquery - Binding animation on many elements -

i try kind of grid need show dot based animation in future. seams perform pretty few elements (i need apply maybe 5times many items)

$('div').bind('shrink', function(){        var $that = $(this).find('> em > span');        $that.animate({'width': '3px', 'height': '3px'}, 500);     }).bind('grow', function(){        var $that = $(this).find('> em > span');        $that.delay(50).animate({'width': '100%', 'height': '100%'}, 300);     }).append('<em><span><span><em/>'); //triggering shrink , grow on hover 

before starting complex animations wanted test hover effect.

you can take @ demo here: http://jsfiddle.net/meo/gvfvb/7/

how improve performance of script?

i seem performance improvements version:

example: http://jsfiddle.net/patrick_dw/gvfvb/10/

var shrink = function() {     $(this).animate({         'width': '3px',         'height': '3px'     }, 500); }; var grow = function() {     $(this.firstchild.firstchild)         .delay(50).animate({         'width': '20px',         'height': '20px'     }, 300); };  $('div').append('<em><span><span><em/>')     .find('> em > span').mouseenter( shrink )     .end().mouseleave(grow)     .click(function() {         $(this).unbind('mouseleave', grow); }); 

here changes made:

• changed shrink , grow named functions, .trigger() doesn't need called fire them, while retaining ability remove them name.
• placed mouseenter event directly on <span> tag don't need .find() every time mouseenter fires.
• the mouseleave needs on <div> optimized removing .find() , replacing native this.firstchild.firstchild.
• this biggest performance improvement: changed grow function animate width absolute value of 20px instead of 100%. things smoothed out change.

you unbind mouseleave when click isn't firing no effect after mouseenter has been unbound.