jquery - Jqueryはdivをローテーションします

Question

divを回転できません。コンソールに警告やエラーはありません。

ここでJSFiddleバージョンを確認できます。

私が使用しているコードは-

$("#div2").click(someFunction2);

function someFunction2() {
    $("#div2").animate({
        rotate: '+=-40deg'
    }, 0);
}

私は何が間違っているのですか？

Answer 1

代わりに、css3.0 プロパティを持ついくつかの css クラスを追加してみてください。

.box_rotate {
  -webkit-transform: rotate(7.5deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(7.5deg);  /* Firefox 3.5-15 */
      -ms-transform: rotate(7.5deg);  /* IE 9 */
        -o-transform: rotate(7.5deg);  /* Opera 10.50-12.00 */
         transform: rotate(7.5deg);  /* Firefox 16+, IE 10+, Opera 12.50+ */
}
.box_transition {
  -webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */
          transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
}

jQuery:

function someFunction2() {
    $(this).addClass('box_rotate box_transition');
}

このフィドルをチェックアウト

Answer 2

これはあなたを助けることができます：

function someFunction2() {
    $("#div2").animate(
        {rotation: 360},
        {
          duration: 500,
          step: function(now, fx) {
              $(this).css({"transform": "rotate("+now+"deg)"});
          }
        }
    );
}

楽しみ！

Answer 3

これを行う最善の方法は CSS3 を使用することですが、CSS3 に慣れていない場合は、jQueryRotate プラグインを使用してこれを実現できます。

$("#div2").click(function(){ 
    //Getting the current angle
    var curAngle = parseInt($(this).getRotateAngle()) || 0;
    $(this).rotate({
        angle: curAngle,
        animateTo: curAngle - 30,
        duration: 1000
    });
});

あなたのフィドルが更新されました: http://jsfiddle.net/NYJWx/5/