jquery将旋转div动画化

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()中支持旋转(Deg)，我在CSS3中预定义了动画关键帧，并为该特定动画分配了标签或标识符。在本例中，标签/标识符被定义为转盒。

从现在开始，单击可单击的div时，jQuery代码段将利用.css()并将必要的属性分配给可旋转元素。一旦分配了这些属性，就会有一个从元素到CSS3动画关键帧的桥梁，从而允许动画执行。还可以通过更改动画持续时间属性来控制动画的速度。

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

我在这里的方法只是基于这样的假设:激活旋转需要一个点击事件，或者需要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提供固定的height-width，并添加以下脚本：

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

其中(box4、box5和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动画。这个插件可以帮助你完成你的目标。

希望这对你有用。