jQuery旋转/转换

我想使用此function旋转然后在特定点或度数停止。 现在元素只是旋转而不停止。 这是代码：

 $(function() { var $elie = $("#bkgimg"); rotate(0); function rotate(degree) { // For webkit browsers: eg Chrome $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); // For Mozilla browser: eg Firefox $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); // Animate rotation with a recursive call setTimeout(function() { rotate(++degree); },65); } });  

谢谢你的帮助

Answer 1

只需删除一次旋转一度的线并永远调用脚本。

 // Animate rotation with a recursive call setTimeout(function() { rotate(++degree); },65); 

然后将所需的值传递给函数…在此示例45为45度。

 $(function() { var $elie = $("#bkgimg"); rotate(45); function rotate(degree) { // For webkit browsers: eg Chrome $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); // For Mozilla browser: eg Firefox $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); } }); 

将.css()更改为.animate()以使用jQuery为旋转设置动画 。 我们还需要为动画添加持续时间5000秒，持续5秒。 并更新您的原始function以删除一些冗余并支持更多浏览器…

 $(function() { var $elie = $("#bkgimg"); rotate(45); function rotate(degree) { $elie.animate({ '-webkit-transform': 'rotate(' + degree + 'deg)', '-moz-transform': 'rotate(' + degree + 'deg)', '-ms-transform': 'rotate(' + degree + 'deg)', '-o-transform': 'rotate(' + degree + 'deg)', 'transform': 'rotate(' + degree + 'deg)', 'zoom': 1 }, 5000); } }); 

编辑：上面的标准jQuery CSS动画代码不起作用，因为显然，jQuery .animate()还不支持CSS3 transforms 。

这个jQuery插件应该为旋转设置动画：

http://plugins.jquery.com/project/QTransform

Answer 2

这是因为你在rotate中有一个递归函数。 它再次呼唤自己：

 // Animate rotation with a recursive call setTimeout(function() { rotate(++degree); },65); 

拿出它，它不会继续递归运行。

我还建议只使用这个function：

 function rotate($el, degrees) { $el.css({ '-webkit-transform' : 'rotate('+degrees+'deg)', '-moz-transform' : 'rotate('+degrees+'deg)', '-ms-transform' : 'rotate('+degrees+'deg)', '-o-transform' : 'rotate('+degrees+'deg)', 'transform' : 'rotate('+degrees+'deg)', 'zoom' : 1 }); } 

它更干净，适用于大多数浏览器。

Answer 3

为什么不单击使用toggleClass？

JS：

 $(this).toggleClass("up"); 

CSS：

 button.up { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); /* IE6–IE9 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand'); zoom: 1; } 

你也可以将它添加到css：

 button{ -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; } 

这将添加动画。

PS …

回答你原来的问题：

你说它旋转但从未停止过。 使用set timeout时，您需要确保您的条件不会调用settimeout，否则它将永远运行。 所以对于你的代码：

Answer 4

我想出了一些问题的解决方案。 它涉及jquery和css。 这类似于切换，但不是切换元素的显示，而是在交替点击时更改其属性。 单击div时，它会将元素旋转180度，当您再次单击它时，带有标记的元素将返回其原始位置。 如果要更改动画持续时间，只需更改transition-duration属性即可。

CSS

 #example1{ transition-duration:1s; } 

jQuery的

 $(document).ready( function () { var toggle = 1; $('div').click( function () { toggle++; if ( (toggle%2)==0){ $('#example1').css( {'transform': 'rotate(180deg)'}); } else{ $('#example1').css({'transform': 'rotate(0deg)'}); } }); 

}）;

Answer 5

 t = setTimeout(function() { rotate(++degree); },65); 

和clearTimeout停止

 clearTimeout(t); 

我在AJAX中使用它

 success:function(){ clearTimeout(t); }