Плавное появление или изменение прозрачности

Для определения прозрачности в 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, которая указывает у какого объекта будет изменяться прозрачность:

Примеры:

дополнение

Один из комментариев ниже побудил меня модернизировать скрипт так, чтобы не использовать глобальные объекты. Как всегда я стараюсь быть проще, насколько это у меня получилось — судить вам…

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

Примеры:

А если использовать инопланетный 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 );
	});