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.
Результат тестирования
Заголовок
Это текст внутри DIV.
| Это текст внутри TABLE. |
Это текст внутри параграфа.
Смотрите также: CSS3-прозрачность (opacity).
Странно, но мой IE7 (не бета) не сработал на тегах DIV, TBODY, TR, H4 и P.
2006-11-02 at 8:59 pm
BOLK, спасибо. Путь к css не правильный был.
В этом css для ие7 для элементов, к которым применяется fade-in эффект определено zoom: 1;
Т.к. под рукой не было ие7 – обнаружил не сразу. В ие6 без этого работает.
2006-11-03 at 1:08 am
У меня в FF2 только на div’е сработало.
2006-11-03 at 3:06 am
А, с чекбоксам не сразу просёк, извините. :-)
2006-11-03 at 3:07 am
В моем FF2 отработало все как часы.
2006-11-03 at 2:46 pm
TABLE – Firefox/1.0.7
* – Opera
2006-11-06 at 4:09 pm
Потестил на
Opera 9.03
FireFox 2.0
Internet Explorer 7.0
Internet Explorer 6.0SP2
всё указанное в таблице соответствует действительности, но в IE6 (номер версии – 6.0.2900.xpsp_sp2_gdr.050301-1519) содержимое контейнеров после fade двоится (кроме картинки).
2006-11-18 at 2:29 pm
Присоединяюсь к предыдущему оратору.
IE6 портит полужирный шрифт – делает обводку ещё более толстой и некрасивой.
А всё оттого, что кто-то работает только под Файрфоксом =)
2006-11-21 at 1:28 pm
двум предыдущим ораторам и другим читателям:
по поводу двоиться: заметка о IE+ClearType
и краткий пересказ – это баг IE – лечиться явным указанием background-color для контейнера, над которым предполагаются “экзекуции”.
P.S.
хозяева сделайте captcha поярче – не желаю одевать очки раньше времени….
2006-11-25 at 7:39 pm
У меня Opera 9.0 и прозрачность вообще не работает. Пробовал на этом сайте, на сайте автора-не работает, попросил друга с Opera 7.5 проверить на сайте автора-тоже не работает.
В чем проблема может быть?
2006-12-12 at 3:14 pm
ДА, все работает, только при попытке сделать это дело самому столкнулся с трудностями – ничего не выходит.
приведите, плиз, примерчик для тупого, как сделать этот эффект для тега DIV например.
2006-12-19 at 9:03 pm
Так все же в исходниках этой страницы :)
initFadeпробегает радиокнопки цепляет значение
idдля последующего запуска
setOpacity10 раз таймаутом. По нажатии “Проверить” запускается. Коротко, четко лаконично – ничего лишнего. Автору респект.
2007-01-23 at 3:03 pm
Если чуток сократить, да простит меня создатель, то вот такое вот…
Д?В тут
Проверить.
2007-01-23 at 3:14 pm
Д?В тут
Проверить.
2007-01-23 at 3:16 pm
хм…После пары попыток выложить код – умываю руки. Каждую команду в
заключать чесслово ломает. Кому надо пишите мыло пришлю..2007-01-23 at 3:25 pm
По поводу cleartype в ?Е-6, можно не обязательно указывать цвет фона. МНе например фон никак не подходил, на фоне background-image смотрелось убого. Проблема решилась явным указанием background-image для контейнера, правда пришлось для него специально нарезать куски из фонового ричунка, чтобы совпадение было 100%.
2007-01-31 at 4:51 pm
А вот и пример использования опасити: http://art.webobzor.net/art/87.php
2007-02-11 at 1:59 am
JavaScript изменение => JavaScript-изменение
2007-03-12 at 10:51 am
угу, точно!
2007-03-12 at 10:22 pm
кстати да ie7 не срабатывает в:
TR, H4 и P
2007-03-30 at 12:46 am
Спасибо за бесценную информацию. То что давно искал.
2007-05-13 at 3:52 am
У меня в Firefox только на div’е работает.
2007-12-10 at 7:47 pm
То что искал. Спасибо за информацию.
2007-12-19 at 6:34 pm
Спасибо за бесценную информацию.
2008-01-30 at 5:11 pm
Не могу врубиться, как сделать чтобы при наведении на картинку она “становилась прозрачной” а потом через 1-2 секунды (неважно) возвражалась в исходное положение.
?з-за этих радиобоксов совсем запутался в коде.
2008-01-30 at 5:52 pm
То что искал. Сперва не получилось но подумал хорошо и зделал.
2008-02-04 at 7:31 pm
А с помощью ползунка, не с помощью ссылки, данный эффект реализовать можно?
2008-02-05 at 6:42 pm
у меня никак не получается. Пример можете показать.
2008-02-06 at 6:36 pm
Срабатывает не каждый раз, особенно в опере.
2008-02-19 at 6:39 pm
Плз, подскажите, все отлично работает, но когда ставлю размер шрифта в ?Е 24px, то при появлении шрифт становится рубленным, прозрачные пиксели становятся в 100% и выглядит просто ужасно!
Можно ли этим как-то бороться ?..
Заранее большое спасибо!
2008-03-04 at 4:57 pm
товарищи, сделал вариацию на тему этого скрипта, скриптик отрабатывается при наведении на картинку (картинок куча), соответственно один скрипт вишет содержимое в контейнер, второй делает фэйд… так вот, если очень активно водить по всем этим картинкам, скриптик стопорится и появляется ужасное мерцание… как отловить данную багу и чем залепить?
заранее благодарен.
2008-07-16 at 4:57 pm
да, кстати, если на тестовом полигончике несколько раз тыкнуть в “Проверить” появляется аналогичное мерциние…
2008-07-16 at 4:59 pm