JS – создаем эффект мигания. Мигающие баннеры в HTML

В данной статье научимся создавать эффект мигания на javascript и jQuery (исчезание и появление) и задавать ему временной интервал. Для этого нам понадобится базовый jQuery и любой DIV-элемент, на который необходимо повесить эффект мигания.

JavaScript

Создаем файл с любым названием в формате *.js и подключаем на страницу следующей строкой. Также не забудьте подключить jQuery над этой строкой, если она у вас до этого не была подключена.

 <script src="script.js"></script>

В файл помещаем следующий код:

$(document).ready(function() {

      //миллисекунды зацикливания вызова функции ниже
	setInterval (blinke_funk, 150);

	function blinke_funk() { 
		var blinke_speed = 150; //миллисекунды анимации

		$("#div_block1").fadeIn(blinke_speed).fadeOut(blinke_speed);
		$("#div_block2").fadeIn(blinke_speed).fadeOut(blinke_speed);
	}

});

Если у вас уже открыт $document.ready(), то дополнительно его открывать нет никакого смысла, просто поместите данный код внутрь имеющегося без первой и последней (со скобками) строками.

Логика

Создаем функцию в которой находим интересующий нас элемент на странице и задаем ему еще две функции — затухание и появление. Ставим им задержку в 150 миллисекунд, которую, для удобства выносим в отдельную переменную.

Задаем правило SetInterval, которое повторяет эту функцию каждые 150 миллисекунд.

HTML / CSS

В разметку элемента, который необходимо анимировать добавляем id=”div_block1″.

<div class="ban_h" id="div_block1"></div>

Неприятные особенности

Данный скрипт работает по принципу первого попавшегося элемента… Это значит, что если у вас на странице два и более блока с id=”div_block1″, мигать будет только тот, что находится выше. Скрипт его найдет и на этом поиск закончится. Для добавления блока используйте новый класс.

DIV ID можно заменить на DIV CLASS заменив решетку на точку. Для добавления нового блока в анимацию добавляем новый объект в jquery, где просто изменяем название id блока.

$(document).ready(function() {

	setInterval (blinke_funk, 150);

	function blinke_funk() { 
		var blinke_speed = 150;

		$("#div_block1").fadeIn(blinke_speed).fadeOut(blinke_speed);
		$("#div_block2").fadeIn(blinke_speed).fadeOut(blinke_speed);
		$("#div_block3").fadeIn(blinke_speed).fadeOut(blinke_speed);

		// в HTML добавить <div class="div_block4">
		$(".div_block4").fadeIn(blinke_speed).fadeOut(blinke_speed);
		$(".div_block5").fadeIn(blinke_speed).fadeOut(blinke_speed);
	}

});