Question

我想在动画函数中旋转div，例如

 $('div').animate({rotate: '30deg'},1000);

我发现了这个：

http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

但我想知道是否有更正式的方式来做或至少以不同的方式。

由于

Answer 1

如果您愿意将CSS3与jQuery结合使用，也许这种方法对您有用：

<强> HTML

<div id="click-me">Rotate</div>

<div id="rotate-box"></div>

<强> CSS

#rotate-box{

   width:50px;
   height:50px;
   background:#222222;

}

@-moz-keyframes rotatebox /*--for firefox--*/{

    from{
        -moz-transform:rotate(0deg);
    }       
    to{
        -moz-transform:rotate(360deg);
    }                       

}

@-webkit-keyframes rotatebox /*--for webkit--*/{

    from{
        -webkit-transform:rotate(0deg);
    }       
    to{
        -webkit-transform:rotate(360deg);
    }                       

}

#click-me{
   font-size:12px;
   cursor:pointer;
   padding:5px;
   background:#888888;
}

假设有问题的元素应该在点击链接/ div /按钮后旋转，那么你的jQuery看起来像这样：

<强>的jQuery

$(document).ready(function(){
    $('#click-me').click(function(){
        $('#rotate-box').css({

        //for firefox
        "-moz-animation-name":"rotatebox",
        "-moz-animation-duration":"0.8s",
        "-moz-animation-iteration-count":"1",
            "-moz-animation-fill-mode":"forwards",

        //for safari & chrome
        "-webkit-animation-name":"rotatebox",
        "-webkit-animation-duration":"0.8s",
        "-webkit-animation-iteration-count":"1",
        "-webkit-animation-fill-mode" : "forwards",

        });
    });
});

因为jQuery还不能支持.animate（）中的rotate（deg），所以我通过预先定义CSS3中的动画关键帧并为该特定动画分配标签或标识符来欺骗。在此示例中，该标签/标识符定义为 rotatebox 。

从这里开始的是，点击可点击div的那一刻，jQuery片段将使用.css（）并将必要的属性分配给可旋转元素。分配这些属性的那一刻起，将存在从元素到CSS3动画关键帧的桥梁，从而允许动画执行。您还可以通过更改animation-duration属性来控制动画的速度。

我个人认为只有在需要点击或鼠标滚动事件来激活旋转时才需要此方法。如果在文档加载时应该立即运行rotate，那么单独使用CSS3就足够了。如果悬停事件应该激活旋转，则同样适用 - 您只需定义将元素链接到元素伪类中的旋转动画的CSS3动画属性。

我的方法只是基于这样的假设，即需要一个click事件来激活旋转，或者jQuery以某种方式需要在其中扮演一个角色。我知道这种方法非常繁琐，所以如果有人有输入，请随时提出建议。请注意，由于此方法涉及CSS3，因此无法在IE8及以下版本中正常工作。

Answer 2

我觉得最简单的是jsfiddle上的这个例子

$(function() {
    var $elie = $("img"), degree = 0, timer;
    rotate();
    function rotate() {

        $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
        $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
        $elie.css('transform','rotate('+degree+'deg)');                      
        timer = setTimeout(function() {
            ++degree; rotate();
        },5);
    }

    $("input").toggle(function() {
        clearTimeout(timer);
    }, function() {
        rotate();
    });
});

http://jsfiddle.net/eaQRx/

Answer 3

QTransform允许您旋转，倾斜，缩放和翻译，它可以跨浏览器工作。

将QTransform.js下载并包含在您的HTML中。

<script src="js/qTransform.js"></script>

为div提供固定的高度 - 宽度并添加以下脚本：

$('#box4').delay(300).animate({rotate: '20deg'}, 500);
$('#box5').delay(700).animate({rotate: '50deg'}, 500);
$('#box6').delay(1200).animate({rotate: '80deg'}, 500);

其中（box4，box5＆amp; box6是我的div id）。

delay(300), delay(700) & delay(1200)在300,500和1200毫秒后启动动画。最后的500是动画的持续时间。

如果您想手动提供旋转角度，可以这样做：

在变量中取角度。例如

var degAngle = 60;

并将其添加到脚本中，如

$('#box4').delay(300).animate({rotate: degAngle+'deg'}, 500);

您还可以提供缩放和旋转等多种效果。如，

$('#box4').delay(300).animate({scale: '1.5', rotate: '20deg'}, 500);

为何选择QTransform？

到目前为止，jQuery不支持CSS3动画。这个插件可以帮助您实现目标。

希望这适合你。

Answer 4

这里是我用来使用jQuery制作缩放和旋转动画的代码：

    var $elem = $('#myImage');
    $({ deg: 0 }).animate({ deg: 359 }, {
        duration: 600,
        step: function (now) {
            var scale = (2 * now / 359);
            $elem.css({
                transform: 'rotate(' + now + 'deg) scale(' + scale + ')'
            });
        }
    });

这基本上从0到359循环，将我的图像旋转了许多度，并且还在0到2之间缩放，因此在动画期间图像从无到有增长到双倍大小。

Answer 5

此解决方案使用CSS3，JQuery和HTML5数据属性。它允许您使用CSS3缓动以相同方向重复旋转。其他CSS3解决方案通常以单向旋转然后向后旋转。单向旋转（例如顺时针方向）对于像刷新或加载按钮这样的东西很有用。

{{1}}

注意：我将当前度数存储在数据属性中，以避免必须解析转换矩阵。

jquery为旋转div设置动画

5 个答案: