jQuery：如何为 div 旋转设置动画？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3789984/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: how do I animate a div rotation?
提问by NullVoxPopuli
I can rotate a div with css, and jquery .rotate, but i don't know how to animate it.
我可以使用 css 和 jquery .rotate 旋转 div，但我不知道如何为其设置动画。
采纳答案by Peter Ajtai
Make use of WebkitTransform / -moz-transform: rotate(Xdeg). This will not work in IE, but Matt's zachstronautsolution doesn't work in IE either.
利用WebkitTransform / -moz-transform: rotate(Xdeg). 这在 IE 中不起作用，但 Matt 的zachstronaut解决方案在 IE 中也不起作用。
If you want to support IE too, you'll have to look into using a canvaslike I believe Raphael does.
如果您也想支持 IE，则必须考虑使用canvas我相信Raphael 所做的.
Here is a simple jQuery snippet that rotates the elements in a jQuery object. Rotation can be started and stopped:
这是一个简单的 jQuery 片段，用于旋转 jQuery 对象中的元素。可以开始和停止旋转：
$(function() {
var $elie = $("img"), degree = 0, timer;
rotate();
function rotate() {
$elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
$elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
timer = setTimeout(function() {
++degree; rotate();
},5);
}
$("input").toggle(function() {
clearTimeout(timer);
}, function() {
rotate();
});
}); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<input type="button" value=" Toggle Spin " />
<br/><br/><br/><br/>
<img src="http://i.imgur.com/ABktns.jpg" />回答by inorganik
If you're designing for an iOS device or just webkit, you can do it with no JS whatsoever:
如果你正在为 iOS 设备或只是 webkit 进行设计，你可以在没有任何 JS 的情况下完成它：
CSS:
CSS：
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.wheel {
width:40px;
height:40px;
background:url(wheel.png);
-webkit-animation-name: spin;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 3s;
}
This would trigger the animation on load. If you wanted to trigger it on hover, it might look like this:
这将在加载时触发动画。如果您想在悬停时触发它，它可能如下所示：
.wheel {
width:40px;
height:40px;
background:url(wheel.png);
}
.wheel:hover {
-webkit-animation-name: spin;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 3s;
}
回答by Steve Robbins
I've been using
我一直在用
$.fn.rotate = function(degrees, step, current) {
var self = $(this);
current = current || 0;
step = step || 5;
current += step;
self.css({
'-webkit-transform' : 'rotate(' + current + 'deg)',
'-moz-transform' : 'rotate(' + current + 'deg)',
'-ms-transform' : 'rotate(' + current + 'deg)',
'transform' : 'rotate(' + current + 'deg)'
});
if (current != degrees) {
setTimeout(function() {
self.rotate(degrees, step, current);
}, 5);
}
};
$(".r90").click(function() { $("span").rotate(90) });
$(".r0").click(function() { $("span").rotate(0, -5, 90) });span { display: inline-block }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<span>potato</span>
<button class="r90">90 degrees</button>
<button class="r0">0 degrees</button>回答by forresto
If you want just a jQuery option, this will work:
如果你只想要一个 jQuery 选项，这将起作用：
$(el).stop().animate(
{rotation: 360},
{
duration: 500,
step: function(now, fx) {
$(this).css({"transform": "rotate("+now+"deg)"});
}
}
);
This works with jQuery 1.8, which takes care of CSS prefixing automatically. jQuery doesn't animate rotation so I'm putting the transform:rotate()in the custom stepfunction. It might only work starting from 0.
这适用于 jQuery 1.8，它会自动处理 CSS 前缀。jQuery 没有动画旋转，所以我把它transform:rotate()放在自定义step函数中。它可能只能从 0 开始工作。
Demo: http://jsfiddle.net/forresto/ShUgD/
演示：http: //jsfiddle.net/forresto/ShUgD/
IE9 and Mobile Safari 4 support CSS transforms but not CSS transitions, so I came up with this simple shim, using Modernizr feature testing:
IE9 和 Mobile Safari 4 支持 CSS 转换但不支持 CSS 转换，所以我想出了这个简单的 shim，使用 Modernizr 功能测试：
if (Modernizr.csstransitions) {
$(el).css({
"transition": "all 500ms ease-in-out"
});
}
$(el).click(function(){
var rotateTo = 360;
if (Modernizr.csstransitions) {
$(el).css({"transform": "rotate("+rotateTo+"deg)"});
} else {
$(el).stop().animate(
{rotation: rotateTo},
{
duration: 500,
step: function(now, fx) {
$(this).css({"transform": "rotate("+now+"deg)"});
}
}
);
}
});
The above will use CSS transitions when available.
以上将在可用时使用 CSS 过渡。
回答by luc
Based on Peter Ajtai answer, here is a small jquery plugin that may help others. I didn't test on Opera and IE9 but is should work on these browsers too.
根据 Peter Ajtai 的回答，这是一个可以帮助其他人的小型 jquery 插件。我没有在 Opera 和 IE9 上进行测试，但也应该在这些浏览器上工作。
$.fn.rotate = function(until, step, initial, elt) {
var _until = (!until)?360:until;
var _step = (!step)?1:step;
var _initial = (!initial)?0:initial;
var _elt = (!elt)?$(this):elt;
var deg = _initial + _step;
var browser_prefixes = ['-webkit', '-moz', '-o', '-ms'];
for (var i=0, l=browser_prefixes.length; i<l; i++) {
var pfx = browser_prefixes[i];
_elt.css(pfx+'-transform', 'rotate('+deg+'deg)');
}
if (deg < _until) {
setTimeout(function() {
$(this).rotate(_until, _step, deg, _elt); //recursive call
}, 5);
}
};
$('.my-elt').rotate()
回答by Daan
As of now you still can'tanimate rotations with jQuery, but you can with CSS3animations, then simply add and remove the class with jQuery to make the animation occur.
到目前为止，您仍然无法使用 jQuery 为旋转设置动画，但您可以使用 CSS3动画，然后只需使用 jQuery 添加和删除该类即可使动画发生。
HTML
HTML
<img src="http://puu.sh/csDxF/2246d616d8.png" width="30" height="30"/>
CSS3
CSS3
img {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
transition-duration:0.4s;
}
.rotate {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
transition-duration:0.4s;
}
jQuery
jQuery
$(document).ready(function() {
$("img").mouseenter(function() {
$(this).addClass("rotate");
});
$("img").mouseleave(function() {
$(this).removeClass("rotate");
});
});
回答by John Kern
This works for me:
这对我有用：
function animateRotate (object,fromDeg,toDeg,duration){
var dummy = $('<span style="margin-left:'+fromDeg+'px;">')
$(dummy).animate({
"margin-left":toDeg+"px"
},{
duration:duration,
step: function(now,fx){
$(object).css('transform','rotate(' + now + 'deg)');
}
});
};
回答by Joseph Astrahan
I needed to rotate an object but have a call back function. Inspired by John Kern's answer I created this.
我需要旋转一个对象但有一个回调函数。受 John Kern 回答的启发，我创建了这个。
function animateRotate (object,fromDeg,toDeg,duration,callback){
var dummy = $('<span style="margin-left:'+fromDeg+'px;">')
$(dummy).animate({
"margin-left":toDeg+"px"
},
{
duration:duration,
step: function(now,fx){
$(object).css('transform','rotate(' + now + 'deg)');
if(now == toDeg){
if(typeof callback == "function"){
callback();
}
}
}
}
)};
Doing this you can simply call the rotate on the object like so... (in my case I'm doing it on a disclosure triangle icon that has already been rotated by default to 270 degress and I'm rotating it another 90 degrees to 360 degrees at 1000 milliseconds. The final argument is the callback after the animation has finished.
这样做你可以像这样简单地调用对象上的旋转......（在我的情况下，我在一个已经默认旋转到 270 度的显示三角形图标上进行它，我将它再旋转 90 度到360度1000毫秒，最后一个参数是动画结束后的回调。
animateRotate($(".disclosure_icon"),270,360,1000,function(){
alert('finished rotate');
});
