jquery优化循环动画功能

Question

我需要找到一种更有效的方法来实现这一结果：

http://jsfiddle.net/H4sjf/1/

与setInterval()和后续.each()混合的.animate()会使此脚本速度变慢。有没有办法利用其他“较便宜”的流程/功能来实现这一结果？

Answer 1

也许您可以为animate（）创建一个回调函数来重新设置“this”并将其自身称为回调？而不是setinterval？

[修改] 我删除了一些不必要的代码：

http://jsfiddle.net/8kgAB/1/

DoPopulateSoundBoard();
function DoPopulateSoundBoard(){
    $('.sound-syn-column').each(function(){
        var dSoundSyn = '';
        for( i = 0; i <= 8; i++ ){
                dSoundSyn += "<div class='ui-corner-all sound-syn'></div>";
            }
        $(this).append( dSoundSyn + "<div class='sound-syn-cover'></div>" );
    });




        $('.sound-syn-cover').each(function(){
                    test34($(this));
        });

}

function test34(obj){
    obj.animate({height: Math.floor( Math.random()*56) }, 500, function(){
            test34($(obj));
    });       
}

不确定这是否更快，但可能是因为setinterval太慢了。

Answer 2

您可以通过向每个setInterval()添加单独的.each()个功能来解除setInterval()和div分离：

$('.sound-syn-cover').each(function(){
    var $this = $(this);
    $this.data('intervalCallback', setInterval(function(){
        $this.animate({height: Math.floor( Math.random()*56) }, 500);
    }, 300));
});

jsFiddle