180度ごとに何かしますか

Question

私は360度回転したいテキストでdivを持っていますが、180度ごとにテキストを変更したいと思います。どうすればJqueryやJavascriptでこれを実現できますか？

これまで、私は回転を監視する方法がわからないため、これに固執しています。

$('.pie_chart').css({'transform' : 'rotate(2000deg)'}); 

私は解決策を利用することができるが、それは私のために動作しませんでしたか、私はちょうどそれが間違って使用している可能性があり、このポストの思考を見て：CSS rotation cross browser with jquery.animate()

Answer 1

これは非常に不正確であるが、それを取得あなたを正しい軌道に乗せるには十分でなければなりません。

function AnimateRotate(angle) { 
    // caching the object for performance reasons 
    var $elem = $('#square'); 
    var texts = ['text', 'another thing', 'one more thing', 'finally'] 
    var maxRotations = Math.floor(angle/180); 
    var rotations = 0; 
    var lastRotation = 0; 

    // we use a pseudo object for the animation 
    // (starts from `0` to `angle`), you can name it as you want 
    $({deg: 0}).animate({deg: angle}, { 
     duration: 2000, 
     step: function(now) { 
      // in the step-callback (that is fired each step of the animation), 
      // you can use the `now` paramter which contains the current 
      // animation-position (`0` up to `angle`) 
      $elem.css({ 
       transform: 'rotate(' + now + 'deg)' 
      }); 


      // Here we must allow ourselves some margin for error 
      // We are making 4 rotations in 2 seconds, so in theory 
      // The box will be at the 180 degrees every half a second 
      // but in actuality it never is at exactly 180 degree except at the star and end 
      // Trial and error has shown that +6 degrees is more or less accurate, 
      // you could do some math to get a better precision 

      // We don't want to update the text at 0 degrees     
      if(now % 180 <= 6 && rotations > 0) { 
       // Shift off the first text and use that for the new text 
       $("#text").html(texts.shift()); 
       rotations++; 
      } else if(now % 180 >= 177) { 
       $("#text").html(texts.shift()); 
       rotations++; 
      } 

      } 
     }) 
    }; 

AnimateRotate(720);