jquery为旋转div设置动画
我想在动画函数中旋转div，例如
$('div').animate({rotate: '30deg'},1000); 我发现了这个：
http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html
但我想知道是否有更正式的方式来做或至少以不同的方式。
谢谢
如果您愿意将CSS3与jQuery结合使用，那么这个方法可能会对您有所帮助：
HTML
Rotate
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就足够了。 这同样适用于如果hover事件应该激活旋转 – 您只需定义将元素链接到元素的伪类中的旋转动画的CSS3动画属性。
我的方法只是基于这样的假设：需要一个click事件来激活旋转，或者jQuery在某种程度上需要在其中扮演一个角色。 我知道这种方法非常繁琐，所以如果有人有意见，请随时提出建议。 请注意，由于此方法涉及CSS3，因此无法在IE8及以下版本中使用。
我觉得最简单的是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(); }); });
QTransform允许您旋转，倾斜，缩放和翻译，它可以跨浏览器工作。
下载并将QTransform.js包含在您的HTML中。
为div提供固定的高度宽度并添加以下脚本：
$('#box4').delay(300).animate({rotate: '20deg'}, 500); $('#box5').delay(700).animate({rotate: '50deg'}, 500); $('#box6').delay(1200).animate({rotate: '80deg'}, 500);
where（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动画。 此插件可以帮助您完成目标。
希望这对你有用。
这是我用来使用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之间缩放，因此在动画期间图像从无到有增长到双倍大小。
此解决方案使用CSS3，JQuery和HTML5数据属性。 它允许您使用CSS3缓动以相同方向重复旋转。 其他CSS3解决方案通常以单向旋转然后向后旋转。 仅单向旋转（例如顺时针方向）对于诸如刷新或加载按钮之类的东西是有用的。
注意：我将当前度存储在数据属性中，以避免必须解析转换矩阵。