jQuery .CSS opacity not working

Question

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 + '"></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.

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

Gabriele Petrioli · Accepted Answer · 2011-04-04 09:44:49Z

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

edited Apr 4, 2011 at 9:44

answered Apr 4, 2011 at 3:10

Gabriele Petrioli

197k35 gold badges276 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dejan Marjanović Over a year ago

You have 2 syntax errors, first var $cube, and second $cubes.. best of all they are not cubes but squares :D

Hussein · Accepted Answer · 2011-04-04 03:17:34Z

2

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

Check http://jsfiddle.net/hwj6Q/

edited Apr 4, 2011 at 3:17

answered Apr 4, 2011 at 3:04

Hussein

42.9k25 gold badges115 silver badges143 bronze badges

4 Comments

gilly3 Over a year ago

Yes, cube_1 - cube_256 exist. They are created in the ready() handler.

Dejan Marjanović Over a year ago

Thank you for example. Yes, but rand returns 0-1 * 256, which is not out of bounds and elements exist. Could you check out my link and confirm it is working in Chrome?

Hussein Over a year ago

I didn't see you had a link. I will check.

Dejan Marjanović Over a year ago

I forgot to close id attribute in HTML. Thank you for your time.

kobe · Accepted Answer · 2011-04-04 02:56:39Z

1

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 */
}

answered Apr 4, 2011 at 2:56

kobe

15.9k15 gold badges67 silver badges93 bronze badges

2 Comments

Dejan Marjanović Over a year ago

Yes, but shouldn't jQuery handle that? Here's a link webarto.com/static/demo/cubes

Hussein Over a year ago

jQuery opacity works cross browser. No need to define any CSS.

Iheartmobile · Accepted Answer · 2011-04-04 02:56:24Z

0

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.

answered Apr 4, 2011 at 2:56

Iheartmobile

1

Collectives™ on Stack Overflow

jQuery .CSS opacity not working

4 Answers 4

1 Comment

Check http://jsfiddle.net/hwj6Q/

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Check http://jsfiddle.net/hwj6Q/

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related