jQuery .CSS opacity not working

I wrote a short script in JS to mimic effect made in Flash. It is working in FF 3.6, but it not working in Chrome, Opera or IE8. Everything is working except .css({opacity: opacity});

Have I missed something? Thanks. edit: I was missing closing quote.

Live: 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 + '">&l开发者_JAVA百科t;/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
    });
}

Thanks to @Gaby aka G. Petrioli for optimization.

---

You do not close the id attribute of the dynamic elements, and that causes all browsers but FF to fail..

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

should be

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

(missing the " at the end of the id attribute)

---

Additionally you should cache your #cube element instead of making jQuery find it for each iteration.

store a reference to it outside of your loop var $cubes = $("#cubes"); and use that inside the loop $cubes.append(...);

Finally change the setInterval to not use a string but a direct reference to your function

setInterval(cube, 50);

example at http://jsfiddle.net/yyrfW/2/

---

jQuery opacity works cross browser. Your opacity script is working for me.

Check http://jsfiddle.net/hwj6Q/

---

for IE you have to use something similar as below

  filter: alpha(opacity = 50);

an example below

.change_opacity {
opacity: 0.5;
filter: alpha(opacity = 50);
width: 100%; /* for IE */
}

---

I think you might need to add something like moz-opacity webkit-opacity o-opacity etc. At least that's just a guess I'm a noob at this hopefully that helps at least a little.