Для определения прозрачности в css по логике должно служить свойство opacity
(Mozilla, Opera), но разработчики IE, как всегда, выделились и сделали по другому. К тому же в IE не все объекты можно сделать прозрачными. Ниже приведен пример.
с контейнером span, который в IE6 прозрачности не получает. Исследовать поведение других тегов в разных версиях «любимого» обозревателя, если честно, нет никакого желания.
Для установления прозрачности объекта в таблице стилей нужно писать:
opacity: 0.5; filter: alpha(opacity=50);
Прозрачность нельзя указывать в процентах явно. Она измеряется: для IE — от 1 до 100, для других — от 0 до 1.
Следующий скрипт осуществляет плавное появление / исчезание (читай плавное изменение прозрачности) объекта:
var t,t2,obj,op; var cm; // для отображения процентов function appear(x) // x - конечное значение прозрачности { op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100; if(op < x) { clearTimeout(t2); op += 0.05; cm.innerHTML = Math.round(op*10)/10*100+'%'; // отображение процентов obj.style.opacity = op; obj.style.filter='alpha(opacity='+op*100+')'; t=setTimeout('appear('+x+')',20); } } function disappear(x) { op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100; if(op > x) { clearTimeout(t); op -= 0.05; cm.innerHTML = Math.round(op*10)/10*100+'%'; // отображение процентов obj.style.opacity = op; obj.style.filter='alpha(opacity='+op*100+')'; t2=setTimeout('disappear('+x+')',20); } }
Используя данные функции можно задать эффект появления / затухания проивольному числу элементов на странице. Для этого нужно установить у требуемых объектов соответствующие обработчики событий. При вызове функций не забываем устанавливать переменную obj, которая указывает у какого объекта будет изменяться прозрачность:
Примеры:
50% | 10% | Это пример задания прозрачности контейнера span (в IE не работает) 40% |
дополнение
Один из комментариев ниже побудил меня модернизировать скрипт так, чтобы не использовать глобальные объекты. Как всегда я стараюсь быть проще, насколько это у меня получилось — судить вам…
var z; function tst(x,x2,obj,pid) // x - конечное значение прозрачности, x2 - начальное { var t,t2; var cm = document.getElementById(pid); // для отображения процентов this.appear = function() { var op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100; if(op < x) { clearTimeout(t2); op += 0.05; cm.innerHTML = Math.round(op*10)/10*100+'%'; obj.style.opacity = op; obj.style.filter='alpha(opacity='+op*100+')'; t = setTimeout(arguments.callee,50); } } this.disappear = function() { var op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100; if(op > x2) { clearTimeout(t); op -= 0.05; cm.innerHTML = Math.round(op*10)/10*100+'%'; obj.style.opacity = op; obj.style.filter='alpha(opacity='+op*100+')'; t2 = setTimeout(arguments.callee,50); } } }
Примеры:
50% | 10% | Это пример задания прозрачности контейнера span (в IE не работает) 40% |
А если использовать инопланетный framework jQuery, то можно не только избавиться от вызова обработчиков событий внутри блока, прозрачность которого нужно изменять, но и сократить код просто до безобразия:
$('img', '#jq_op') .each(function (){ $(this).data('op',$(this).css('opacity')); }) .mouseover(function (){ $(this).animate({opacity: 1}, 500 ); }) .mouseout(function (){ $(this).stop(true,true).animate({opacity: $(this).data('op')}, 500 ); });