在很多元素上綁定動畫

我嘗試做一些需要在未來顯示基於點動畫的網格。但接縫即使有幾個要素非常緩慢執行（我需要申請它也許5倍，許多項目）在很多元素上綁定動畫

$('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/

我怎麼能改善這個腳本的性能？

來源

2010-12-01 meo

我似乎得到一些性能改進與此版本：

例子：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); 
});

下面是我所做的更改：

改變shrink和grow到名爲功能，以便.trigger()不需要被叫去解僱他們，同時保留按名字將他們移除的能力。
將mouseenter事件直接放在<span>標籤上，因此每次發生mouseenter火災時都不需要執行.find()。
mouseleave需要在<div>上，所以我通過刪除.find()並將其替換爲本地this.firstChild.firstChild進行了優化。
這可能是最大的性能改進：我更改grow函數以將width設置爲絕對值20px而不是100%。隨着這種變化，事情變得很順利。

當你點擊，這樣它不發射沒有影響mouseenter已經綁定後，您也可能取消綁定mouseleave。

來源

2010-12-01 19:49:31 user113716

您的所有評論對我來說都是完全合理的。謝謝。但它仍然非常緩慢：/我將這些功能綁定爲元素上的事件。所以我可以很容易地從外部函數觸發它們，這實際上會在點框架上繪製圖片。除非有人發佈WONDER SOLUTION解決我的問題，否則我會爲您的努力和您的明確意見向您提供正確的awnser +1。 – meo 2010-12-01 22:04:30

在很多元素上綁定動畫

回答

相關問題