JavaScript-изменение прозрачности (Opacity setting)

QuirksMode.org: Opacity setting

Сегодня речь пойдет о динамическом изменении прозрачности (opacity) некоторым элементам для создания эффекта плавного появления (fade-in effect).
В некоторых браузерах не все элементы позволяют установить прозрачность. В основном это касается некоторых элементов таблиц, установить прозрачность которым невозможно почти во всех браузерах.

Изменение прозрачности с помощью JavaScript

Для изменения прозрачности элемента можно использовать следующий скрипт:


function setOpacity(value) {
   testObj.style.opacity = value/10;
   testObj.style.filter = 'alpha(opacity=' + value*10 + ')';
}

В нем: свойство opacity применяется для Mozilla, Safari и Opera, filter для Explorer.
Значение value изменяются от 0 до 10.

Результат тестирования

Test Element Explorer 6 Explorer 7 Firefox 1.5+ Safari 1.3 Opera 9
DIV Да Да Да Да Да
TABLE Да Да Да Да Да
TBODY Нет Нет Да Нет Нет
TR Нет Нет Да Нет Нет
TD Да Да Да Да Да
H4 Да Да Да Да Да
P Да Да Да Да Да
IMG Да Да Да Да Да

Проверить.

<h4>Заголовок</h4>

<div>Это текст внутри DIV.</div>
Это текст внутри TABLE.

<p>Это текст внутри параграфа.</p>

test image

Смотрите также: CSS3-прозрачность (opacity).



Много комментариев (32) к “JavaScript-изменение прозрачности (Opacity setting)”

  1. BOLK :

    Странно, но мой IE7 (не бета) не сработал на тегах DIV, TBODY, TR, H4 и P.


  2. Баранов Андрей :

    BOLK, спасибо. Путь к css не правильный был.
    В этом css для ие7 для элементов, к которым применяется fade-in эффект определено zoom: 1;
    Т.к. под рукой не было ие7 – обнаружил не сразу. В ие6 без этого работает.


  3. voldmar :

    У меня в FF2 только на div’е сработало.


  4. voldmar :

    А, с чекбоксам не сразу просёк, извините. :-)


  5. Flack :

    В моем FF2 отработало все как часы.


  6. Hermann :

    TABLE – Firefox/1.0.7
    * – Opera


  7. BOLK :

    Потестил на
    Opera 9.03
    FireFox 2.0
    Internet Explorer 7.0
    Internet Explorer 6.0SP2

    всё указанное в таблице соответствует действительности, но в IE6 (номер версии – 6.0.2900.xpsp_sp2_gdr.050301-1519) содержимое контейнеров после fade двоится (кроме картинки).


  8. UriX :

    Присоединяюсь к предыдущему оратору.
    IE6 портит полужирный шрифт – делает обводку ещё более толстой и некрасивой.
    А всё оттого, что кто-то работает только под Файрфоксом =)


  9. MiRacLe :

    двум предыдущим ораторам и другим читателям:
    по поводу двоиться: заметка о IE+ClearType
    и краткий пересказ – это баг IE – лечиться явным указанием background-color для контейнера, над которым предполагаются “экзекуции”.

    P.S.
    хозяева сделайте captcha поярче – не желаю одевать очки раньше времени….


  10. Brodyaga :

    У меня Opera 9.0 и прозрачность вообще не работает. Пробовал на этом сайте, на сайте автора-не работает, попросил друга с Opera 7.5 проверить на сайте автора-тоже не работает.
    В чем проблема может быть?


  11. Vbnzq :

    ДА, все работает, только при попытке сделать это дело самому столкнулся с трудностями – ничего не выходит.
    приведите, плиз, примерчик для тупого, как сделать этот эффект для тега DIV например.


  12. Acturus :

    Так все же в исходниках этой страницы :)
    initFade
    пробегает радиокнопки цепляет значение
    id
    для последующего запуска
    setOpacity
    10 раз таймаутом. По нажатии “Проверить” запускается. Коротко, четко лаконично – ничего лишнего. Автору респект.


  13. Acturus :

    Если чуток сократить, да простит меня создатель, то вот такое вот…

    ДИВ тут

    Проверить.


  14. Acturus :

    ДИВ тут

    Проверить.


  15. Acturus :

    хм…После пары попыток выложить код – умываю руки. Каждую команду в <code> заключать чесслово ломает. Кому надо пишите мыло пришлю..


  16. Acturus :

    По поводу cleartype в ИЕ-6, можно не обязательно указывать цвет фона. МНе например фон никак не подходил, на фоне background-image смотрелось убого. Проблема решилась явным указанием background-image для контейнера, правда пришлось для него специально нарезать куски из фонового ричунка, чтобы совпадение было 100%.


  17. Андрей :

    А вот и пример использования опасити: http://www.art.webobzor.net/art/87.php


  18. MT :

    JavaScript изменение => JavaScript-изменение


  19. Баранов Андрей :

    угу, точно!


  20. Андрей :

    кстати да ie7 не срабатывает в:
    TR, H4 и P


  21. Николай :

    Спасибо за бесценную информацию. То что давно искал.


  22. Alex Mailer :

    У меня в Firefox только на div’е работает.


  23. Alexander :

    То что искал. Спасибо за информацию.


  24. Aндрей :

    Спасибо за бесценную информацию.


  25. rkin :

    Не могу врубиться, как сделать чтобы при наведении на картинку она “становилась прозрачной” а потом через 1-2 секунды (неважно) возвражалась в исходное положение.
    Из-за этих радиобоксов совсем запутался в коде.


  26. Вовка :

    То что искал. Сперва не получилось но подумал хорошо и зделал.


  27. CiD :

    А с помощью ползунка, не с помощью ссылки, данный эффект реализовать можно?


  28. Андрей :

    у меня никак не получается. Пример можете показать.


  29. Дмитрий :

    Срабатывает не каждый раз, особенно в опере.


  30. Sterh :

    Плз, подскажите, все отлично работает, но когда ставлю размер шрифта в ИЕ 24px, то при появлении шрифт становится рубленным, прозрачные пиксели становятся в 100% и выглядит просто ужасно!
    Можно ли этим как-то бороться ?..
    Заранее большое спасибо!


  31. CheRooT :

    товарищи, сделал вариацию на тему этого скрипта, скриптик отрабатывается при наведении на картинку (картинок куча), соответственно один скрипт вишет содержимое в контейнер, второй делает фэйд… так вот, если очень активно водить по всем этим картинкам, скриптик стопорится и появляется ужасное мерцание… как отловить данную багу и чем залепить?
    заранее благодарен.


  32. CheRooT :

    да, кстати, если на тестовом полигончике несколько раз тыкнуть в “Проверить” появляется аналогичное мерциние…



22 queries 0.188 seconds.