Question

我在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又名G. Petrioli进行优化。

Answer 1

jQuery opacity可以跨浏览器工作。你的不透明脚本对我有用。

检查http://jsfiddle.net/hwj6Q/

Answer 2

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

Answer 3

对于IE，您必须使用类似下面的内容

  filter: alpha(opacity = 50);

以下示例

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

Answer 4

我认为你可能需要添加类似moz-opacity webkit-opacity o-opacity等的东西。至少这只是猜测我是一个noob，希望这至少有一点帮助。

jQuery .CSS不透明度不起作用

4 个答案:

检查http://jsfiddle.net/hwj6Q/