如何在jQuery中单独动画随机的颜色线

Question

到目前为止，我有一个简单的脚本来检查文档的大小，并为文档中的每一行创建一个1px的div，并为每一行应用随机的颜色。我想让每条线的背景颜色都单独动起来，这样所有的线都可以变化和改变颜色。

下面是我的代码:

<script type="text/javascript">
    $(document).ready(function() {
        var pageHeight = $(window).height();
        for(var i = 0; i < pageHeight; i++) {
            $('body').prepend('<div class="myDiv '+i+'"></div>');
        };
        $('.myDiv').each(function() {
            var myColor = randomColor();
            //alert (myColor);
            $(this).css("background-color", "rgb(" + myColor + ")");
        });
    });
    function randomColor () {
        var color1 = randomFromTo(100,255);
        var color2 = randomFromTo(200,255);
        var color3 = randomFromTo(0,100);
        return color1 + "," + color2 + "," + color3;
    };
    function randomFromTo(from, to){
        return Math.floor(Math.random() * (to - from + 1) + from);
    }
</script>
<style>
    body { margin:0; }
    .myDiv { height:1px; }
</style>

Answer 1

可能有一种更优雅的方法来做到这一点，但这是我想到的。为动画创建一个函数。然后使用函数的回调循环。

http://jsfiddle.net/cYzmp/

你需要使用jQuery UI，因为默认的jQuery不支持背景颜色的动画。我在小提琴里用它。

同样，这是难以置信的cpu密集。我的两个处理器中有一个一直处于50%的状态。我不认为你可以期望你的用户有一个非常愉快的体验，如果这种情况将一直持续下去。

$('.myDiv').each(function() {
        var myColor = randomColor();
        $(this).css("background-color", "rgb(" + myColor + ")");
        animateBG(this);
    });    
});
function animateBG(element) {
    $(element).animate({ backgroundColor: "rgb(" + randomColor() + ")"}, 3000, function() {
        animateBG(this);
    });
}