Нужно, чтобы по клику на кнопку запускалась функция, которая увеличивает каждый блок(первый через 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);
}
})
Ответ
$('.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;
}
Комментариев нет:
Отправить комментарий