jquery 为旋转 div 设置动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9776015/
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 animate a rotating div
提问by user1246035
I would like to rotate a div in an animate function such as
我想在动画函数中旋转一个 div，例如
$('div').animate({rotate: '30deg'},1000);
I have found this:
我发现了这个：
http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html
http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html
But I want to know if there is a more official way to do it or at least a different way.
但我想知道是否有更官方的方式来做到这一点，或者至少是一种不同的方式。
Thanks
谢谢
回答by vynx
If you're open to using CSS3 in combination with jQuery, perhaps this method may be of some use to you:
如果您愿意将 CSS3 与 jQuery 结合使用，那么这种方法可能对您有用：
HTML
HTML
<div id="click-me">Rotate</div>
<div id="rotate-box"></div>
CSS
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;
}
And assuming that the element in question is supposed to rotate upon a click of a link/div/button, your jQuery will look something like this:
假设有问题的元素应该在单击链接/div/按钮时旋转，您的 jQuery 将如下所示：
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",
});
});
});
So since jQuery has yet to be able to support rotate(deg) in .animate(), I've kinda cheated by pre-defining the animation key frames in CSS3 and assigning a label or identifier to that particular animation. In this example, that label/identifier is defined as rotatebox.
因此，由于 jQuery 尚未能够在 .animate() 中支持旋转 (度)，因此我在 CSS3 中预先定义了动画关键帧并为该特定动画分配了标签或标识符，这有点欺骗了我。在此示例中，该标签/标识符定义为rotatebox。
What happens from here on is that the moment the clickable div is clicked upon, the jQuery snippet will utilize .css() and assign the necessary properties into the rotatable element. The moment those properties are assigned, there will be a bridge from the element to the CSS3 animation keyframes, thereby allowing for the animation to execute. You can also control the speed of the animation by altering the animation-duration property.
从这里开始发生的事情是，在单击可点击 div 的那一刻，jQuery 代码段将利用 .css() 并将必要的属性分配给可旋转元素。一旦分配了这些属性，就会有一个从元素到 CSS3 动画关键帧的桥梁，从而允许动画执行。您还可以通过更改 animation-duration 属性来控制动画的速度。
I personally think that this method is only necessary if click or mouse scroll events are required to activate the rotate. If the rotate is supposed to be running immediately upon document load, then using CSS3 alone will suffice. The same applies to if a hover event is supposed to activate the rotate - you simply define the CSS3 animation properties that links the element to the rotating animation in the element's pseudo classes.
我个人认为只有在需要单击或鼠标滚动事件来激活旋转时才需要此方法。如果旋转应该在文档加载时立即运行，那么单独使用 CSS3 就足够了。这同样适用于悬停事件是否应该激活旋转 - 您只需定义 CSS3 动画属性，将元素链接到元素伪类中的旋转动画。
My method here is simply based on the assumption that a click event is required to activate the rotate or that jQuery is somehow required to play a part in this. I understand that this method is pretty tedious so if anyone has a input, feel free to suggest. Do note also that as this method involves CSS3, it will not work as it should on IE8 and below.
我在这里的方法只是基于这样一个假设，即需要单击事件来激活旋转，或者 jQuery 需要以某种方式在其中发挥作用。我知道这种方法很乏味，所以如果有人有意见，请随时提出建议。另请注意，由于此方法涉及 CSS3，因此在 IE8 及以下版本上将无法正常工作。
回答by rajesh_kw
The simplest I feel is this example on jsfiddle
我觉得最简单的是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();
});
});
回答by Debopam Mitra
QTransformallows you to rotate, skew, scale and translate and it works cross browser.
QTransform允许您旋转、倾斜、缩放和平移，它可以跨浏览器工作。
Download and inlcude the QTransform.jsto your html.
下载并包含在QTransform.js您的 html 中。
<script src="js/qTransform.js"></script>
<script src="js/qTransform.js"></script>
Provide a fixed height-width to your div(s) and add the following script:
为您的 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 are my div id's).
The delay(300), delay(700) & delay(1200)starts the animation after 300, 500 and 1200 milliseconds. And the 500 at the end is the duration for the animation.
其中（box4、box5 和 box6 是我的 div id）。
在delay(300), delay(700) & delay(1200)启动后300，500和1200毫秒的动画。最后的 500 是动画的持续时间。
If you want to manually provide the rotation angle you can do like this:
如果您想手动提供旋转角度，您可以这样做：
Take the angle in variable. e.g.
取变量中的角度。例如
var degAngle = 60;
and add it to the script like
并将其添加到脚本中
$('#box4').delay(300).animate({rotate: degAngle+'deg'}, 500);
You can also provide the multiple effects like scale along with rotation. E.g.,
您还可以提供多种效果，例如缩放和旋转。例如，
$('#box4').delay(300).animate({scale: '1.5', rotate: '20deg'}, 500);
Why QTransform?
为什么是 QTransform？
Till date jQuery doesn't support CSS3 animations. This plugin can help you to accomplish your target.
到目前为止，jQuery 不支持 CSS3 动画。这个插件可以帮助你完成你的目标。
Hope this works for you.
希望这对你有用。
回答by Mike Gledhill
Here's the code I used to animate scale and rotation using jQuery:
这是我用来使用 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 + ')'
});
}
});
This basically loops from 0 to 359, rotates my image by that many degrees, and also scales between 0 and 2, so the image grows from nothing to double size during the animation.
这基本上是从 0 到 359 循环，将我的图像旋转那么多度，并在 0 和 2 之间缩放，因此在动画过程中图像从无增长到两倍大小。
回答by Collin Krawll
This solution uses CSS3, JQuery and HTML5 data attributes. It allows you to rotate repeatedly in the same direction using CSS3 easing. Other CSS3 solutions usually rotate one way and then back the other. Rotating one way only (clockwise for example) is useful for something like a refresh or loading button.
此解决方案使用 CSS3、JQuery 和 HTML5 数据属性。它允许您使用 CSS3 缓动在同一方向上重复旋转。其他 CSS3 解决方案通常以一种方式旋转，然后以另一种方式旋转。仅以一种方式旋转（例如顺时针）对于刷新或加载按钮之类的东西很有用。
<style>
.rotate{
-moz-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
</style>
<div class="rotate" style="width: 100px; height: 100px; background-color: red;"></div>
<script>
$(".rotate").click(function(){
var rotate = 180;
var elem = $(this);
//get the current degree
var currentDegree = 0;
if(typeof(elem.attr('data-degree')) != 'undefined') {
currentDegree += parseInt(elem.attr('data-degree'), 10);
}
//calculate the new degree
var newDegree = currentDegree + rotate;
//modify the elem css
elem.css({ WebkitTransform: 'rotate(' + newDegree + 'deg)'});
elem.css({ '-moz-transform': 'rotate(' + newDegree + 'deg)'});
elem.css('transform','rotate(' + newDegree + 'deg)');
//store the degree for next time
elem.attr('data-degree', newDegree);
});
</script>
Note: I store the current degree in a data attribute to avoid having to parse the transition matrix.
注意：我将当前度数存储在数据属性中以避免解析转换矩阵。
