Jquery旋转div

Question

我无法旋转div。控制台中没有警告或错误。

您可以查看JSFiddle version here。

我使用的代码是 -

$("#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');
}

CHECKOUT THIS FIDDLE

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 plugin来实现此目的：

$("#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/