多くの要素にアニメーションをバインドする

Question

今後、ドットベースのアニメーションを表示する必要のあるグリッドを作成しようとしています。 しかし、それは私がホバー効果でそれをテストしたかった複雑なアニメーションを実行するために開始する前にも、いくつかの要素（私はその多くの項目5times多分にそれを適用する必要があります）

$('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 and grow on hover 

とかなりゆっくりと行うために縫い目。

あなたはここでデモを見てみることができます： http://jsfiddle.net/meo/GvfVb/7/

をどのように私は、このスクリプトのパフォーマンスを向上させることができますか？

Answer 1

私は、このバージョンでいくつかのパフォーマンスの向上を取得するように見える：

例：

• という名前にshrinkとgrowを変更：ここで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); 
  }); 
  

  私が行った変更があります関数は、.trigger()にする必要はありませんそれらを名前で取り除く能力を保持しながら、それらを発射するために呼び出される。

• イベントを<span>タグに直接配置するので、mouseenterが発生するたびに.find()を実行する必要はありません。
• mouseleaveは<div>にある必要がありますので、.find()を削除してネイティブthis.firstChild.firstChildに置き換えて最適化しました。
• これはおそらく最大のパフォーマンス改善でした。の代わりに、関数を変更して、の絶対値を20pxに変更しました。その変化に本当にうまくいきました。

mouseenterが結合していないされた後、それは効果なしに発射されないように、あなたがクリックしたときにも、おそらくmouseleaveのバインドを解除できます。