jquery动画旋转div [英] jquery animate a rotating div
问题描述
我想在animate函数中旋转一个div，例如
I would like to rotate a div in an animate function such as
$('div').animate({rotate: '30deg'},1000);
我发现这个：
a href =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
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.
感谢
推荐答案
开放使用CSS3结合jQuery，也许这个方法可能对你有一些用途：
If you're open to using CSS3 in combination with jQuery, perhaps this method may be of some use to you:
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;
}
并且假设所讨论的元素应该在点击link / div / button，你的jQuery将看起来像这样：
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:
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通过预先定义CSS3中的动画关键帧并为该特定动画分配标签或标识符来欺骗。在此示例中，该标签/标识符定义为 rotatebox 。
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.
从这里开始会发生的情况是，点击可点击div ，jQuery片段将使用.css（）并将必要的属性分配给可旋转元素。分配这些属性的那一刻，就会有一个从元素到CSS3动画关键帧的桥梁，从而允许动画执行。您还可以通过更改animation-duration属性来控制动画的速度。
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.
我个人认为只有在需要点击或鼠标滚动事件来激活旋转时才需要此方法。如果在文档加载时旋转应该立即运行，则单独使用CSS3就足够了。这同样适用于如果一个悬停事件应该激活旋转 - 你只需定义CSS3动画属性链接元素的旋转动画的元素的伪类。
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.
我的方法在这里是简单地基于假设需要一个点击事件来激活旋转或jQuery是在某种程度上需要在这里播放一部分。我理解这种方法是相当乏味，所以如果任何人有一个输入，随时建议。还要注意，因为这个方法涉及CSS3，它将无法正常工作，因为它应该在IE8及以下。
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动画旋转div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
