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);
    });
}

如何在jQuery中单独设置颜色的随机颜色？

1 个答案: