javascript - jQuery .CSS不透明度不起作用

我用JS写了一个简短的脚本来模仿Flash的效果。
它在FF 3.6中工作，但在Chrome, Opera or IE8中不工作。
一切正常，除了.css({opacity: opacity});

我错过了什么吗？谢谢。编辑：我错过了关闭报价。

直播：http://webarto.com/static/demo/cubes/

var cubes = 16;

var x = cubes;
var y = cubes;
var n = 1;

$(document).ready(function () {
    var cubes = $("#cubes");
    for (i = 1; i <= x; i++) {
        for (j = 1; j <= y; j++) {
            cubes.append('<div id="cube_' + n + '"></div>');
            n++;
        }
    }

    setInterval(cube, 50);

});

function cube() {
    var rand = Math.floor(Math.random() * 256);
    var opacity = Math.random() * 0.8;
    $("#cube_" + rand).css({
        opacity: opacity
    });
}

感谢@Gaby aka G. Petrioli的优化。

最佳答案

您没有关闭动态元素的id属性，这会导致除FF之外的所有浏览器失败。

<div id="cube_' + n + '></div>

应该

<div id="cube_' + n + '"></div>

（在id属性的末尾缺少"）



另外，您应该缓存#cube元素，而不是让jQuery在每次迭代中都找到它。

将引用存储在循环var $cubes = $("#cubes");之外，并在循环$cubes.append(...);中使用

最后将setInterval更改为不使用字符串，而是直接引用您的函数

setInterval(cube, 50);

http://jsfiddle.net/yyrfW/2/中的示例