Отображаем контент с задержкой

delay0

Здравствуйте, сегодня рассмотрим как заставить блок с контентом появиться на сайте с задержкой.

Скачать исходники для статьи можно ниже

1. Размещаем контент между тегами «div» и добавим пользовательский идентификатор или класс к нему.

<div class="my-class"></div>

Если вы хотите разместить контент с задержкой в записи/странице wordpress, то вам нужно зайти на страницу «Создать запись»/»Создать страницу» и зайти во вкладку «Текст» — здесь можно вставлять вышеуказанный код:

delay1

2. Далее скрываем контент, который будет появляться с задержкой. Вы можете сделать это, добавив следующие строки в ваш файл CSS:

.my-class {
display: none;
}

В wordpress файл стилей можно найти если зайти в админку, далее выбрать пункт «Внешний вид» в левом меню и подпункт «Редактор», справа в списке шаблонов выбираем файл — style.css.

3. Далее нужно добавить следующий JavaScript, на той странице сайта, на которой вы хотите разместить контент с задержкой:

<script>
$(document).ready(function() {
$('.my-class').delay(1000).fadeIn(500);
});
</script>

Здесь delay(1000) — регулирует время задержки появления блока, в мс (миллисекунд).

Чтобы разместить JavaScript на конкретной записи/странице сайт на wordpress — можно воспользоваться плагином jQuery in Posts Pages, сведения о нем:
Последнее обновление: 2015-5-21
Количество активных загрузок: 100+
Сайт плагина: «wordpress.org/plugins/jquery-in-posts-pages/»
Загрузить плагин с mnogoblog.ru — можно здесь.

После установки и активации плагина jQuery in Posts Pages в каждой записи/странице при их редактировании из админки появиться новое окошко, в котором можно указать JavaScript (скриншот ниже кликабелен — нажмите для увеличения):

delay2

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc