Мигающий блок или мигающий текст в блоке


51

Что бы привлечь внимание посетителей, иногда полезно применить мигающие элементы на странице.
В статье идет описание, как можно создать такой же мигающий блок для сайта при помощи jQuery. 

Существуют несколько способов, как можно создать мигающие блоки. Например:

  • сделать 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);
Добавить комментарий
Может быть интересно

Порядок действий для установки Solr на сервере с Centos 7

4

В операционной системе Windows, как и в других операционных системах, интерактивные (набираемые с клавиатуры и сразу же выполняемые) команды выполняются с помощью так называемого командного интерпретатора, иначе называемого командным процессором или оболочкой командной строки (command shell).

3

Несколько способов как в twig объединить несколько строк в одну

3
Снова возвращаемся к migrate. Довольно удобный фреймворк для импорта данных в Друпал. Один из распространенных форматов источника для импорта - CSV. Поддерживается migrate из коробки. Описание и примеры работы с классом MigrateSourceCSV можно найти на drupal.org.
2
Иногда при разработке сайта появляется необходимость создавать отдельный шаблон для определенной ноды. По умолчанию такой возможности нет, зато можно это прикрутить самостоятельно. Как это сделать? Это можно узнать в данной статье.