Question

我尝试做某种需要在将来显示基于点的动画的网格。但即使使用一些元素，它的接缝也能很慢地执行（我需要将其应用到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/

我怎样才能提高这个脚本的性能？

Answer 1

我似乎在这个版本上获得了一些性能改进：

示例： 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>代码上，这样每次.find()触发时都不需要mouseenter。
mouseleave需要<div>，因此我通过删除.find()并将其替换为原生this.firstChild.firstChild来对其进行优化。
这可能是性能最大的改进：我更改了grow功能，将width设置为20px的绝对值，而不是100%。随着这种变化，事情变得非常顺利。

您也可以在点击时取消绑定mouseleave，以便在mouseenter未绑定后不会触发效果。

在许多元素上绑定动画

1 个答案: