Форум

domius · #1 (**permalink**) 23.04.2014, 02:45

Всем привет. есть код , анимация выполняется сразу на 6 елементах , как зделать чтоб она выполнялась по очереди ?

(function () {

var div = document.getElementById('d1'),
div_len = div.children;

for(var i = 0; i < div_len.length; i++){
	(function (a) {
		var counter = 4,
			pixeles = 0,
			time =  setInterval(function () {
					
			div_len[a].style.WebkitTransform = 'rotate('+pixeles+'deg)'
			
                        if(pixeles >= 360) {
			    clearInterval(time);
			}
		
                   pixeles+=counter;

			}, 10)
		})(i);
	}

}());

рони · #2 (**permalink**) 23.04.2014, 03:08

domius,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
  div {

    width: 100px;

    height: 100px;

    background: #ccc;
    display: inline-block;

  }
  </style>
</head>

<body id="d1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
 <script>
      (function () {

var div = document.getElementById('d1'),
div_len = div.children;

var i = 0;
	(function foo(a) {
		var counter = 4,
			pixeles = 0,
			time =  setInterval(function () {

			div_len[a].style.transform = 'rotate('+pixeles+'deg)';
div_len[a].style.WebkitTransform = 'rotate('+pixeles+'deg)';

                        if(pixeles >= 360) {
			    clearInterval(time);
                i++;
                if (i < div_len.length)foo(i)
			}

                   pixeles+=counter;

			}, 10)
		})(i);


}());

 </script>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript