Jquery 旋转一个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15517966/
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 rotate a div
提问by Joe Slater
I am unable to rotate a div. There are no warnings or errors in console.
我无法旋转 div。控制台中没有警告或错误。
You can check out the JSFiddle version here.
您可以在此处查看JSFiddle 版本。
The code I am using is -
我使用的代码是 -
$("#div2").click(someFunction2);
function someFunction2() {
$("#div2").animate({
rotate: '+=-40deg'
}, 0);
}
What am I doing wrong?
我究竟做错了什么？
回答by Jai
You can try adding some css classes with css3.0 properties instead:
您可以尝试添加一些具有 css3.0 属性的 css 类：
.box_rotate {
-webkit-transform: rotate(7.5deg); /* Chrome, Safari 3.1+ */
-moz-transform: rotate(7.5deg); /* Firefox 3.5-15 */
-ms-transform: rotate(7.5deg); /* IE 9 */
-o-transform: rotate(7.5deg); /* Opera 10.50-12.00 */
transform: rotate(7.5deg); /* Firefox 16+, IE 10+, Opera 12.50+ */
}
.box_transition {
-webkit-transition: all 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */
-moz-transition: all 0.3s ease-out; /* Firefox 4-15 */
-o-transition: all 0.3s ease-out; /* Opera 10.50–12.00 */
transition: all 0.3s ease-out; /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
}
jQuery:
jQuery：
function someFunction2() {
$(this).addClass('box_rotate box_transition');
}
CHECKOUT THIS FIDDLE
看看这个小提琴
回答by Subedi Kishor
This can help you:
这可以帮助您：
function someFunction2() {
$("#div2").animate(
{rotation: 360},
{
duration: 500,
step: function(now, fx) {
$(this).css({"transform": "rotate("+now+"deg)"});
}
}
);
}
Enjoy!
享受！
回答by Tom Sarduy
The best way to do this is using CSS3, but if you are not comfortable with CSS3, you can use jQueryRotate pluginto achieve this:
最好的方法是使用 CSS3，但如果您对 CSS3 不满意，您可以使用jQueryRotate 插件来实现：
$("#div2").click(function(){
//Getting the current angle
var curAngle = parseInt($(this).getRotateAngle()) || 0;
$(this).rotate({
angle: curAngle,
animateTo: curAngle - 30,
duration: 1000
});
});
Your Fiddle Updated: http://jsfiddle.net/NYJWx/5/
你的小提琴更新：http: //jsfiddle.net/NYJWx/5/
