Бесконечная анимация иконок с помощью JQuery

255
14 февраля 2018, 10:31

Задача такая: иконки должны увеличиваться поочередно, а после этого уменьшаться и так по кругу. Написал такой код этой самой анимации, правда работает это все только один раз. Как это можно реализовать? Анимация не обязательно должна быть бесконечной, хотя бы 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>

READ ALSO
Скрыть блок если сняты чекбоксы

Скрыть блок если сняты чекбоксы

По умолчанию при открытии страницы чекбоксы сняты, как сделать что когда мы снимаем выделение с чекбоксов страница перезагружалась бы или...

218
Как суммировать время php или js?

Как суммировать время php или js?

Здравствуйте, есть массив:

225
Замена старого файла в local storage на новый

Замена старого файла в local storage на новый

Очень долго искал способ вставить SVG-спрайт из отдельного файла в HTML код, чтобы при этом он оставался чистым, а спрайты вызывались по ID из этого...

251