Задача такая: иконки должны увеличиваться поочередно, а после этого уменьшаться и так по кругу. Написал такой код этой самой анимации, правда работает это все только один раз. Как это можно реализовать? Анимация не обязательно должна быть бесконечной, хотя бы 5-10 итераций. .icon1-7 имеют position:absolute.
function iconTransform() {
for (var j = 1; j < 10; j++) {
setTimeout(function() {
$(".icon1").animate({
width: "18%",
left: "-0.8%",
top: "-10.8%",
}, 500);
}, 500);
setTimeout(function() {
$(".icon2").animate({
width: "18%",
left: "26.8%",
top: "-11%",
}, 500);
}, 1000);
setTimeout(function() {
$(".icon3").animate({
width: "18%",
top: "-11%",
right: "27.5%",
}, 500);
}, 1500);
setTimeout(function() {
$(".icon4").animate({
width: "18%",
top: "-11%",
right: "0.8%",
}, 500);
}, 2000);
setTimeout(function() {
$(".icon5").animate({
width: "18%",
top: "25.5%",
left: "40.9%",
}, 500);
}, 2500);
setTimeout(function() {
$(".icon6").animate({
width: "18%",
left: "27%",
bottom: "10%",
}, 500);
}, 3000);
setTimeout(function() {
$(".icon7").animate({
width: "18%",
left: "54.7%",
bottom: "9.6%",
}, 500);
}, 3500);
setTimeout(function() {
$(".icon1").animate({
width: "17%",
left: "-0.4%",
top: "-10.2%",
}, 500);
}, 4000);
setTimeout(function() {
$(".icon2").animate({
width: "17%",
left: "27.5%",
top: "-10.2%",
}, 500);
}, 4000);
setTimeout(function() {
$(".icon3").animate({
width: "17%",
right: "27.5%",
top: "-10.2%",
}, 500);
}, 4000);
setTimeout(function() {
$(".icon4").animate({
width: "17%",
right: "0.4%",
top: "-10.2%",
}, 500);
}, 4000);
setTimeout(function() {
$(".icon5").animate({
width: "17%",
left: "41.4%",
top: "27%",
}, 500);
}, 4000);
setTimeout(function() {
$(".icon6").animate({
width: "17%",
left: "27.6%",
bottom: "10%",
}, 500);
}, 4000);
setTimeout(function() {
$(".icon7").animate({
width: "17%",
left: "55%",
bottom: "10%",
}, 500);
}, 4000);
}
}
window.onload = iconTransform();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="benefits">
<div class="wrap">
<div class="title">
<p>Почему именно мы?</p>
</div>
<div class="schedule">
<div class="branches">
--КОД SVG ВЕТОК--
</div>
<div class="icon1">
--КОД SVG ИКОНКИ--
</div>
<div class="icon2">
--КОД SVG ИКОНКИ--
</div>
<div class="icon3">
--КОД SVG ИКОНКИ--
</div>
<div class="icon4">
--КОД SVG ИКОНКИ--
</div>
<div class="icon5">
--КОД SVG ИКОНКИ--
</div>
<div class="icon6">
--КОД SVG ИКОНКИ--
</div>
<div class="icon7">
--КОД SVG ИКОНКИ--
</div>
</div>
</div>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
По умолчанию при открытии страницы чекбоксы сняты, как сделать что когда мы снимаем выделение с чекбоксов страница перезагружалась бы или...
Очень долго искал способ вставить SVG-спрайт из отдельного файла в HTML код, чтобы при этом он оставался чистым, а спрайты вызывались по ID из этого...