Jquery旋转div

我无法旋转div。 控制台中没有警告或错误。

你可以在这里查看JSFiddle版本 。

我使用的代码是 –

$("#div2").click(someFunction2); function someFunction2() { $("#div2").animate({ rotate: '+=-40deg' }, 0); } 

我究竟做错了什么？

Answer 1

您可以尝试使用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的：

 function someFunction2() { $(this).addClass('box_rotate box_transition'); } 

检查这个骗局

Answer 2

这可以帮助您：

 function someFunction2() { $("#div2").animate( {rotation: 360}, { duration: 500, step: function(now, fx) { $(this).css({"transform": "rotate("+now+"deg)"}); } } ); } 

请享用！

Answer 3

执行此操作的最佳方法是使用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 }); }); 

你的小提琴更新： http ： //jsfiddle.net/NYJWx/5/