Главная » Создание сайтов » Программирование » Плавное появление и исчезание объекта на JavaScript

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

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

  1. #188 КНЕП в 15:32, 28 декабря 2008:

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

    Надо будет попробовать и себя на блоге...

  2. #238 амир в 10:10, 24 января 2009: (подписался)

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

    спасибо за статью!

    необходимо чтобы блок,

    изначально 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];

    }

    }

    но блок появляется сразу.

    плавного эффекта скольжения достичь не уддается.

    не подскажите решение вопроса?

  3. #254 WebMast в 12:35, 28 января 2009:

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

    амир, для такого пользуют jQuery ;). Вот, ты стал началом новой статьи!

    Ссылка: plavnoe-izmenenie-vysoty-u-obekta

  4. #3666 telescope в 10:28, 13 августа 2009:

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

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

    — а почему так? Получается что значения свойств заданные в таблице стилей JS не видит? Только те что заданы через атрибут style или через сам JS. Это у всех так происходит?

  5. #4420 WebMast в 9:07, 27 августа 2009:

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

    telescope, не совсем понимаю что вы хотите сказать.

  6. #5468 telescope в 19:06, 12 сентября 2009:

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

    уже разобрался — если прозрачность задана через CSS-таблицу, то в obj.style.opacity не будет этого значения.

  7. #7814 NeonXP в 14:55, 1 ноября 2009: (подписался)

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

    У меня была задача сделать меню из плавно появляющихся/исчезающих блоков. Использовал Ваш код, но заметил, что если быстро проводить мышью вдоль строки элементов, то элементы не успевают вовремя гаснуть. Решил проблему тем, что заменил

    var hT, sT; на var hT={}, sT={}; и везде в коде sT на sT[objId] и hT на hT[objId]

  8. #7970 WebMast в 17:18, 6 ноября 2009:

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

    Спасибо : ).

  9. #9214 Игрок в 14:29, 8 января 2010:

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

    Спасибо автору! Полезная статья, а то так не хочется самому изучать javascript!

  10. #9437 miks в 12:45, 11 марта 2010:

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

    В IE8 не работает.

  11. #9524 Алексей в 6:15, 25 марта 2010: (подписался)

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

    Для работы в IE8 необходимо включить поддержку скриптов. Блокирует их система безопасности.

  12. #9680 alex___________ в 6:48, 21 мая 2010: (подписался)

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

    ************

    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;

    ************

  13. Спасибо, alex, за дополнение =).

  14. #12656 Admin в 12:13, 15 декабря 2011: (подписался)

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

    супер, спасибо

  15. #12719 alex в 9:35, 31 декабря 2011:

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

    Спасибо!

    Очень хорошая статья, но мне все-таки ближе jQuery

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

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

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

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

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

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

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

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

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

    setTimeout (function (){$('#statss').fadeOut ('fast')},10000)

    ;

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

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

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

    Спасибо!

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

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

    Т.е. плавное возникновение работает только для одного первого объекта.

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

    Спасибо!

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

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

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

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

имя:

e-mail:

сайт:

текст:

Subscribe without commenting