Плавное появление и исчезание объекта на JavaScript
Среда, Декабрь 24, 2008 13:35 
Делая проект заказчику, я наткнулся на одну проблему. Нужно было преобразовать блоки и ссылки. Наводя курсор на объект, тот должен был плавно менять opacity до 1. Убирая курсор с блока, тот должен был вернуть начальный уровень прозрачности.
Конечно, все это было реализовано, но при помощи JavaScript. И получилось довольно приятно, и я решил показать Вам, как это делается!
Посмотреть пример: opacity-javascript.html
Для начала, содадим HTML код:
<div id="block"
onmouseover="Show('block', 1);"
onmouseout="Hide('block', 0.1);"
style="opacity: 0.1; filter: alpha(opacity=10);">
Вот тестовый блок
</div>
Теперь я объясню вам все что там есть.
-
OnMouseOver. Возникает при наведении курсора мыши на элемент. В данном случае, мы включаем функцию Show, заданную в скрипте (об этом позже).
-
OnMouseOut. Возникает при перемещения указателя мыши за границы объекта. Здесь мы включаем функцию Hide. Замедте, мы включаем, а не выключаем Show.
-
('block', 1) и ('block', 0.1). Эти параметры относятся к onmouseover и onmouseout соответственно. 'block' — это ID, который должен обязательно быть указан в div (в данном примере). '1' и '0.1' — это параметр opacity до значения которого будет увеличиваться или уменьшаться прозрачность.
- Style. Здесь мы указываем только прозрачность, а все остальные стили пропишите в #block. Здесь opacity луше указывать такое, какое задано в OnMouseOut.
Теперь разберемся с JavaScript:
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);
}
}
Чтобы изменить время пояления и исчезания, то исчите строки:
Исчезание: hT=setTimeout('Hide(\''+objId+'\', '+x+')',30);
И измените последний «30» на сколько хотите. Памятка: скорость измеряется в миллисекундах.
Вот и все. Объект был сделан. Если нужно, то могу объяснить принцип действия скрипта.
Этот скрипт универсален, так как не имеет никаких привязанностей к определенному ID. Так что его можно спокой пользовать и для других случаях. Например для ссылок. Вот код ссылок:
href=""
onmouseover="Show('link', 1);"
onmouseout="Hide('link', 0.1);"
style="opacity: 0.1; filter: alpha(opacity=10);">123
</a>
Главное помнить, что при смене в объекте ID'a, то его придется сменить еще в двух местах. Об этом я писал...
Loading ...
КНЕП сообщил:
Декабрь 28th, 2008 15:32
Надо будет попробовать и себя на блоге...
амир сообщил:
Январь 24th, 2009 10:10
спасибо за статью!
необходимо чтобы блок,
изначально display:none;
плавно появлялся на странице,при вызове функции .
прочитав эту статью,написал так:
var hT;
function Show(objId, hBlock) { // название необхрдимого дива, высота
var obj = document.getElementById(objId);
var n=0;
while(n < hBlock) {
n ++;
clearTimeout(hT);
var stylecss = changeStyle(obj, { «display» : «block», «height» : ''+n+'px', «border» : «none» });
setTimeout(''+stylecss+'',30);
}
return objId ;
}
function changeStyle(obj, props) { for(var i in props) {
obj.style[i] = props[i];
}
}
—
но блок появляется сразу.
плавного эффекта скольжения достичь не уддается.
не подскажите решение вопроса?
WebMast сообщил:
Январь 28th, 2009 12:35
амир, для такого пользуют jQuery ;). Вот, ты стал началом новой статьи!
Ссылка: plavnoe-izmenenie-vysoty-u-obekta
telescope сообщил:
Август 13th, 2009 10:28
"4. Style. Здесь мы указываем только прозрачность, а все остальные стили пропишите в #block. "
— а почему так? Получается что значения свойств заданные в таблице стилей JS не видит? Только те что заданы через атрибут style или через сам JS. Это у всех так происходит?
WebMast сообщил:
Август 27th, 2009 9:07
telescope, не совсем понимаю что вы хотите сказать.
telescope сообщил:
Сентябрь 12th, 2009 19:06
уже разобрался — если прозрачность задана через CSS-таблицу, то в obj.style.opacity не будет этого значения.
NeonXP сообщил:
Ноябрь 1st, 2009 14:55
У меня была задача сделать меню из плавно появляющихся/исчезающих блоков. Использовал Ваш код, но заметил, что если быстро проводить мышью вдоль строки элементов, то элементы не успевают вовремя гаснуть. Решил проблему тем, что заменил
var hT, sT; на var hT={}, sT={}; и везде в коде sT на sT[objId] и hT на hT[objId]
WebMast сообщил:
Ноябрь 6th, 2009 17:18
Спасибо : ).
Игрок сообщил:
Январь 8th, 2010 14:29
Спасибо автору! Полезная статья, а то так не хочется самому изучать javascript!
miks сообщил:
Март 11th, 2010 12:45
В IE8 не работает.
Алексей сообщил:
Март 25th, 2010 6:15
Для работы в IE8 необходимо включить поддержку скриптов. Блокирует их система безопасности.
alex___________ сообщил:
Май 21st, 2010 6:48
************
op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;
************
Это не будет работать в IE)
А это будет)
************
var ieop = obj.style.filter.match(/alpha\(opacity=(.*)\)/);
if(ieop && ieop.length)
ieop = ieop[1];
else
ieop = 100;
op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(ieop)/100;
************
Евгений Жлобо сообщил:
Май 22nd, 2010 7:48
Спасибо, alex, за дополнение =).