javascript - jQuery .CSS opacity not working - Stack Overflow

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: /

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

Thanks to @Gaby aka G. Petrioli for optimization.

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

Thanks to @Gaby aka G. Petrioli for optimization.

• javascript
• jquery
• css
• opacity

Share Follow edited Apr 4, 2011 at 3:17 Dejan Marjanović asked Apr 4, 2011 at 2:52 Dejan MarjanovićDejan Marjanović 19.4k77 gold badges5353 silver badges6767 bronze badges 2

• The cube function seems to be working properly: jsbin./ozice4/2/edit -- Tested in Chrome and didn't see a problem. – RussellUresti Commented Apr 4, 2011 at 3:03
• @RussellUresti, it does work, but applying opacity doesn't. Please check live link webarto./static/demo/cubes. Thanks. – Dejan Marjanović Commented Apr 4, 2011 at 3:05

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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/yyrfW/2/

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

Check http://jsfiddle/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.