Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.07.2017, 10:50
Новичок на форуме
Отправить личное сообщение для andamurobl Посмотреть профиль Найти все сообщения от andamurobl
 
Регистрация: 11.07.2017
Сообщений: 6

Вертикальная анимация спрайта
Добрый день! Нашел на старом битриксе код который при событии hover листает бг блока. БГ из себя представляет вертикальный спрайт из 16 кадров. У каждого кадра свое css правило позиционирования бг. Если я конечно все правильно понимаю.

$("#tick").hover(function () { 

var on=0;
var i=1;
if($("#tick").hasClass("tsl_1"))
t=setInterval( function() 
	{
	if(on==0)
	{
	$("#tick").removeClass("tsl_"+i); 
	if(i==16) { on=1; $("#tick").addClass("tsl_1"); clearInterval(t);}
	else{
	i++;
	$("#tick").addClass("tsl_"+i); }
	}
	}
	, 90);
   })
</script>


Есть необходимость поменять код чтобы он работал не по событию hover а при загрузке страницы с интервалом. Изучал раздел setInterval и setTimeout, думаю что суть в них, но применить их чтобы код работал, так и не удалось. Если кому не жалко времени - надеюсь на помощь.
Ответить с цитированием
  #2 (permalink)  
Старый 11.07.2017, 11:44
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

andamurobl,
Попробуйте заменить
$("#tick").hover(function ()
на
$(window).load(function ()
Ответить с цитированием
  #3 (permalink)  
Старый 11.07.2017, 12:08
Новичок на форуме
Отправить личное сообщение для andamurobl Посмотреть профиль Найти все сообщения от andamurobl
 
Регистрация: 11.07.2017
Сообщений: 6

Верно! Все заработало. Добавил setIterval к функции и получил интервал в 6 секунд. Рабочий код:
<script type="text/javascript">

$(window).load(
	setInterval (function () { 
		var on=0;
		var i=1;
		if($("#tick").hasClass("tsl_1"))
		t=setInterval( function() 
		{
		if(on==0)
		{
		$("#tick").removeClass("tsl_"+i); 
		if(i==16) { on=1; $("#tick").addClass("tsl_1"); clearInterval(t);}
		else{
		i++;
		$("#tick").addClass("tsl_"+i); }
		}
		}
		, 90);
    },6000))

</script>


ПС Спасибо Dilettante_Pro за потраченное время.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как реализована анимация на сайте популярной игры? whoIam Общие вопросы Javascript 6 19.09.2016 09:45
CSS3 Анимация [Не срабатывает при переключении вкладки] Quasar[CY] (X)HTML/CSS 1 18.11.2015 20:43
Анимация после анимации Narahon Элементы интерфейса 12 02.04.2015 22:06
Анимация gif картинки при нажатии на ссылку ainur777 Общие вопросы Javascript 2 06.07.2014 16:23
Цикличность анимация? SashaBorandi jQuery 1 25.12.2008 09:20