Изменить направление вращения div каждые 5 секунд

Question

У меня есть два div (i.e div1 и div2), div1 вращаются против часовой стрелки и другие div2 вращаются по часовой стрелке. Теперь я хочу, чтобы оба div изменяли направление вращения каждые 5 секунд непрерывно, например, если div1 вращается по часовой стрелке через 5 секунд, он вращается против часовой стрелки, затем через 5 секунд по часовой стрелке и так далее. Тот же процесс применяется в другой DIV ..

<div id="div1" style="height:100px; width:100px; border:2px solid gray">div1 </div> 
<div id="div2" style="margin-top:100px; height:100px; width:100px; border:2px solid Red">div2</div> 

<script> 
    rotate(0,0); 
    function rotate(degree1, degree2) { 
      $("#div1").css({ WebkitTransform: 'rotate(' + degree1 + 'deg)' }); 
      $("#div2").css({ WebkitTransform: 'rotate(' + degree2 + 'deg)' }); 
      $("#div1").css({ '-moz-transform': 'rotate(' + degree1 + 'deg)'}); 
      $("#div2").css({ '-moz-transform': 'rotate(' + degree2 + 'deg)'}); 
      timer = setTimeout(function() { 
       rotate(++degree1, --degree2); 
       }, 5); 
      } 
</script> 

Answer 1

Если я правильно понял вашу проблему, это код, который вам нужен (а вот это sample fiddle):

var invert = false; 
startRotating(); 
function startRotating() { 
    rotate(0, 0); 
    setTimeout(invertRotate, 5000); 
} 
function invertRotate() { 
    invert = !invert; 
    setTimeout(invertRotate, 5000); 
} 
function rotate(degree1, degree2) { 
    $("#div1").css({ 
     WebkitTransform: 'rotate(' + degree1 + 'deg)' 
    }); 
    $("#div2").css({ 
     WebkitTransform: 'rotate(' + degree2 + 'deg)' 
    }); 
    $("#div1").css({ 
     '-moz-transform': 'rotate(' + degree1 + 'deg)' 
    }); 
    $("#div2").css({ 
     '-moz-transform': 'rotate(' + degree2 + 'deg)' 
    }); 
    setTimeout(function() { 
     invert ? rotate(++degree1, --degree2) : rotate(--degree1, ++degree2); 
    }, 5); 
} 

Answer 2

<div id="div1" style="height:100px; width:100px; border:2px solid gray">div1 </div> 
<div id="div2" style="margin-top:100px; height:100px; width:100px; border:2px solid Red">div2</div> 

<script> 
    rotate(0,0,0); 
    function rotate(degree1, degree2, timepassed) { 
      $("#div1").css({ WebkitTransform: 'rotate(' + degree1 + 'deg)' }); 
      $("#div2").css({ WebkitTransform: 'rotate(' + degree2 + 'deg)' }); 
      $("#div1").css({ '-moz-transform': 'rotate(' + degree1 + 'deg)'}); 
      $("#div2").css({ '-moz-transform': 'rotate(' + degree2 + 'deg)'}); 
      var orientation = 1 - (Math.round(timepassed/5000)%2)*2; 
      setTimeout(function() { 
       rotate(degree1 + orientation, degree2 - orientation, timepassed+5); 
       }, 5); 
      } 
</script> 

Вы должны пройти время прошло. Другой способ - рассчитать его с начальной точки.

Answer 3

var counter = 0; var reverse = false; 
    rotate(0,0); 
    function rotate(degree1, degree2) { 
     $("#div1").css({ WebkitTransform: 'rotate(' + degree1 + 'deg)' }); 
     $("#div2").css({ WebkitTransform: 'rotate(' + degree2 + 'deg)' }); 
     $("#div1").css({ '-moz-transform': 'rotate(' + degree1 + 'deg)'}); 
     $("#div2").css({ '-moz-transform': 'rotate(' + degree2 + 'deg)'}); 
     timer = setTimeout(function() { 
      counter += 5; 
      if (counter == 5000) { counter = 0; reverse = reverse ? false : true;} 
      if (reverse) rotate(--degree1, ++degree2); 
      else rotate(++degree1, --degree2); 
     }, 5); 
    } 

Используйте глобальный счетчик и bool. Когда счетчик поражает цель времени, переключите bool. Вызовите функцию rotate, основанную на значении bool.