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/