Добрый день уважаемые, подскажите пожалуйста как написать правильный алгоритм для анимации вращения данного примера.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style type="text/css">
#field {
position: relative;
width: 400px;
height: 400px;
margin-left: 10%;
margin-top: 10%;
/*background-color: yellow;*/
border: 5px solid black;
}
.block {
position: relative;
width: 10px;
height: 220px;
background-color: rgba(255, 0, 0, 0.5);
}
#first,
#second,
#third,
#fourth,
#fifth{
position: absolute;
top: 15%;
left: 50%;
transform-origin: center 320px;
}
</style>
</head>
<body>
<div id="field">
<div id="first" class="animate">
<div class="block">1</div>
</div>
<div id="second">
<div class="block">2</div>
</div>
<div id="third">
<div class="block">3</div>
</div>
<div id="fourth">
<div class="block">4</div>
</div>
<div id="fifth">
<div class="block">5</div>
</div>
</div>
<input id="button" type="button" value="Push me!">
<script type="text/javascript">
window.onload = function () {
console.log('VSE GOOD');
var i,
$field = $('#field'),
block = $('.block'),
allBlockes =$('#field > div'),
len = allBlockes.length,
but = $('#button');
but.on('click', allBlockes, function() {
function AnimateRotate(el, d){
$({deg: 0}).animate({deg: d}, {
step: function(now, fx){
el.css({
transform: "rotate(" + now + "deg)"
});
}
});
}
for (i=1; i<len; i++){
if (i%2 == 0){
var el1 = allBlockes.eq(i);
*!* AnimateRotate(el1, i*(-15)); */!*
} else {
var el2 = allBlockes.eq(i);
*!* AnimateRotate(el2, i*(15)); */!*
}
}
})
};
</script>
</body>
</html>
На выходе я хочу что б у меня все "парные" блоки вращались вправо на 15град. а не парные в лево на 15град. Тоесть так #first=0град #second = 15град #third = -15град #fourth = 30град #fifth=-30град.
Подскажете, пожалуйста как правильно цикл переделать ?