jquery – 在许多元素上绑定动画

2019年8月2日 168次阅读

我尝试做某种需要在将来显示基于点的动画的网格.

但即使使用一些元素,它的接缝也能很慢地执行(我需要将它应用到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/

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

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

示例：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()来触发它们,同时保留按名称删除它们的功能.
>将mouseenter事件直接放在< span>上标记,因此每次mouseenter触发时都不需要执行.find().
> mouseleave需要在< div>上所以我通过删除.find()并用原生this.firstChild.firstChild替换它来优化它.
>这可能是最大的性能提升：我改变了增长功能,将宽度设置为20px的绝对值,而不是100％.随着这种变化,事情变得非常顺利.

您可能还可能在单击时取消绑定鼠标距离,以便在未锁定mouseenter后它不会触发无效.

点赞