Опубликовано в вс, 17/11/2013 - 00:41 |
Что бы привлечь внимание посетителей, иногда полезно применить мигающие элементы на странице.
Существуют несколько способов, как можно создать мигающие блоки. Например:
- сделать gif-анимацию - не динамическое решение
- сделать флеш анимацию - слишком громоздское решение для эффекта мигания
- создать эффект мигания при помощи jQuery.
Про последний вариант расскажу поподробнее.
Создадим div внутри которого будет мигающее содержимое. Структура примерно такая:
<div class="blinking"> <div2 class="line1">ПЕРВАЯ СТРОКА</div> <div class="line2">вторая строка</div> <div class="line3">третья строка</div> </div>
Теперь сразу приведу фрагмент кода, который заставит содержимое блока исчезать и появляться.
height=$(".blinking").height(); $(".blinking").css('height',height); $(".blinking>div").hide(); setTimeout(function(){ $(".blinking>div").show(); setInterval(function(){ $(".blinking>div").toggle();},500)},3000);
Готовый пример мигающего блока:
Готовый пример
МИГАЮЩЕГО
блока
Комментарии
Добавить комментарий