在很多元素上绑定动画

我尝试做一些需要在未来显示基于点动画的网格。但接缝即使有几个要素非常缓慢执行（我需要申请它也许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

在很多元素上绑定动画

回答

相关问题