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

Question

我用 JS 编写了一个简短的脚本来模仿 Flash 中制作的效果。 它可以在 FF 3.6 中运行，但不能在 Chrome、Opera 或 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 的优化。

Answer 1

您没有关闭动态元素的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/