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

Плавное появление и исчезание объекта на 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, то его придется сменить еще в двух местах. Об этом я писал..

Комментарии — 20 комментариев

  1. #12720 vanoID в 12:30, 31 декабря 2011:

    Ответить | Цитировать

    >alex, на вкус и цвет фломастеры разные 🙂

  2. #14609 alex в 0:29, 7 апреля 2012:

    Ответить | Цитировать

    подскажите как в место блока плавно скрыть backgroundColor = ‘rgb(250, 234, 234)’

  3. #17727 salam в 6:22, 20 июля 2012:

    Ответить | Цитировать

    Есть скрипт чтобы блок исчезал

    setTimeout(function(){$(‘#statss’).fadeOut(‘fast’)},10000)
    ;

    А как сделать что бы появлялся?

  4. #23992 Андрей в 16:20, 27 ноября 2013:

    Ответить | Цитировать

    Спасибо!

    Удачно воспользовался только появлением объектов, но вот незадача: прозрачность каждого следующего нового появляющегося контента (их несколько) отсчитывается не от нуля.
    По событию onclick контент загружается в определенное место, и не обязательно чтобы он плавно исчезал. Хотелось бы чтобы просто каждый новый объект/контент начинал бы загружаться с максимальной прозрачности
    Т.е. плавное возникновение работает только для одного первого объекта.

    Вопрос: Как обнулить/сбросить функцию Show, чтобы в начале каждого нового срабатывания функции объект был бы изначально нивидим?

    Спасибо!

  5. #49801 Рома в 19:19, 11 мая 2015:

    Ответить | Цитировать

    юзайте :hover в css, ебланы

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting