Плавное появление и исчезание объекта на JavaScript

Делая проект заказчику, я наткнулся на одну проблему. Нужно было преобразовать блоки и ссылки. Наводя курсор на объект, тот должен был плавно менять opacity до 1. Убирая курсор с блока, тот должен был вернуть начальный уровень прозрачности.

Конечно, все это было реализовано, но при помощи JavaScript. И получилось довольно приятно, и я решил показать Вам, как это делается!

Посмотреть пример: opacity-javascript.html

Для начала, содадим HTML код:
<script type="text/javascript" src="js/img-opacity.js"></script>
<div id="block"
onmouseover="Show('block', 1);"
onmouseout="Hide('block', 0.1);"
style="opacity: 0.1; filter: alpha(opacity=10);">
Вот тестовый блок
</div>
Теперь я объясню вам все что там есть.

1. OnMouseOver. Возникает при наведении курсора мыши на элемент. В данном случае, мы включаем функцию Show, заданную в скрипте (об этом позже).

2. OnMouseOut. Возникает при перемещения указателя мыши за границы объекта. Здесь мы включаем функцию Hide. Замедте, мы включаем, а не выключаем Show.

3. (‘block’, 1) и (‘block’, 0.1). Эти параметры относятся к onmouseover и onmouseout соответственно. ‘block’ — это ID, который должен обязательно быть указан в div (в данном примере). ‘1’ и ‘0.1’ — это параметр opacity до значения которого будет увеличиваться или уменьшаться прозрачность.

4. Style. Здесь мы указываем только прозрачность, а все остальные стили пропишите в #block. Здесь opacity луше указывать такое, какое задано в OnMouseOut.

Теперь разберемся с JavaScript:
var hT, sT;
function Show(objId, x) {
var obj = document.getElementById(objId);
op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;
if(op < x) {
clearTimeout(hT);
op += 0.1;
obj.style.opacity = op;
obj.style.filter='alpha(opacity='+op*100+')';
sT=setTimeout('Show(\''+objId+'\', '+x+')',30);
}
}
function Hide(objId, x) {
var obj = document.getElementById(objId);
op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;
if(op > x) {
clearTimeout(sT);
op -= 0.1;
obj.style.opacity = op;
obj.style.filter='alpha(opacity='+op*100+')';
hT=setTimeout('Hide(\''+objId+'\', '+x+')',30);
}
}
Чтобы изменить время пояления и исчезания, то исчите строки:
Появление: sT=setTimeout('Show(\''+objId+'\', '+x+')',30);
Исчезание: hT=setTimeout('Hide(\''+objId+'\', '+x+')',30);
И измените последний «30» на сколько хотите. Памятка: скорость измеряется в миллисекундах.

Вот и все. Объект был сделан. Если нужно, то могу объяснить принцип действия скрипта.

Этот скрипт универсален, так как не имеет никаких привязанностей к определенному ID. Так что его можно спокой пользовать и для других случаях. Например для ссылок. Вот код ссылок:
<a id="link"
href=""
onmouseover="Show('link', 1);"
onmouseout="Hide('link', 0.1);"
style="opacity: 0.1; filter: alpha(opacity=10);">123
</a>
Главное помнить, что при смене в объекте ID’a, то его придется сменить еще в двух местах. Об этом я писал..