Страницы

Поиск по вопросам

пятница, 12 июля 2019 г.

Не корректно работает цикл

Нужно, чтобы по клику на кнопку запускалась функция, которая увеличивает каждый блок(первый через 500мс, второй через секунду и т.д.), после увеличения всех блоков, все они одновременно должны уменьшиться до начальных размеров. Так же, все это должно повторяться несколько раз, 10, к примеру. Проблема состоит в том, что по запуску цикла, он проходит не все содержимое по одному разу, после чего должен делать это по новой, а начинает выполнять каждую строку по 10 раз, после чего переходит на следующую, выполняет ее 10 раз и так далее. В результате цикл,по сути, работает всего один раз. Не знаю что еще можно попробовать, это нужно для реализации анимирования иконок: Бесконечная анимация иконок с помощью JQuery, пока так и не разобрался и реализовал через css animation, но возможности этой технологии не позволяют реализовать нужное в полной мере. HTML:
$('.buttons').click(function transform() { debugger for (var i = 0; i < 10; i++) { setTimeout(function() { $('div.element1').css('padding', '80px'); }, 500); setTimeout(function() { $('div.element2').css('padding', '80px'); }, 1000); setTimeout(function() { $('div.element3').css('padding', '80px'); }, 1500); setTimeout(function() { $('div.element4').css('padding', '80px'); }, 2000); setTimeout(function() { $('div.element5').css('padding', '80px'); }, 2500); setTimeout(function() { $('div.element6').css('padding', '80px'); }, 3000); setTimeout(function() { $('div.element7').css('padding', '80px'); }, 3500); setTimeout(function() { $('div.element1').css('padding', '70px'); $('div.element2').css('padding', '70px'); $('div.element3').css('padding', '70px'); $('div.element4').css('padding', '70px'); $('div.element5').css('padding', '70px'); $('div.element6').css('padding', '70px'); $('div.element7').css('padding', '70px'); }, 4000); } })

1
2
3
4
5
6
7


Ответ

$('.buttons').click(function() { for (let i = 0; i < 10; i++) { for (let j = 1; j <= 7; j++) { setTimeout(function() { $('div.element' + j).css('padding', '20px'); }, 500 * j + (4000 * i)); } setTimeout(function() { $('div.schema div').css('padding', '10px'); }, 4000 * (i + 1)); } }); div.schema div { border: 1px solid black; background: lightgreen; display: inline; padding: 10px; }

1
2
3
4
5
6
7

Комментариев нет:

Отправить комментарий