Непрозрачность jQuery .CSS не работает - PullRequest
Новая
       6

Непрозрачность jQuery .CSS не работает

2 голосов
/ 04 апреля 2011

Я написал короткий скрипт на JS для имитации эффекта, сделанного во Flash. Он работает в FF 3.6, но не работает в Chrome, Opera or IE8. Все работает кроме .css({opacity: opacity});

Я что-то пропустил? Благодарю. редактировать: мне не хватало закрывающей цитаты.

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

Спасибо @Gaby aka G. Petrioli за оптимизацию.

Ответы [ 4 ]

2 голосов
/ 04 апреля 2011

Вы не закрываете атрибут 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/

2 голосов
/ 04 апреля 2011

jQuery opacity работает в разных браузерах.Ваш сценарий непрозрачности работает для меня.

Чек http://jsfiddle.net/hwj6Q/

1 голос
/ 04 апреля 2011

для IE вы должны использовать что-то подобное, как показано ниже 

  filter: alpha(opacity = 50);

пример ниже 

.change_opacity {
opacity: 0.5;
filter: alpha(opacity = 50);
width: 100%; /* for IE */
}
0 голосов
/ 04 апреля 2011

Я думаю, вам может понадобиться добавить что-то вроде moz-opacity, webkit-opacity, o-opacity и т. Д. По крайней мере, это всего лишь предположение, что я новичок в этом, надеюсь, это поможет хотя бы немного.

...