jQuery：我如何为div旋转设置动画？
我可以使用css和jquery .rotate旋转div，但我不知道如何为它设置动画。
使用WebkitTransform / -moz-transform: rotate(Xdeg) 。 这在IE中不起作用，但Matt的zachstronaut解决方案在IE中也不起作用。
如果你也想支持IE，你将不得不考虑使用像我相信拉斐尔那样的canvas 。
这是一个简单的jQuery片段，用于旋转jQuery对象中的元素。 可以开始和停止旋转：
$(function() { var $elie = $("img"), degree = 0, timer; rotate(); function rotate() { $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); timer = setTimeout(function() { ++degree; rotate(); },5); } $("input").toggle(function() { clearTimeout(timer); }, function() { rotate(); }); });
如果您正在为iOS设备或webkit进行设计，那么您可以在没有任何JS的情况下进行设计：
CSS：
@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } .wheel { width:40px; height:40px; background:url(wheel.png); -webkit-animation-name: spin; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-duration: 3s; }
这将在加载时触发动画。 如果你想在hover时触发它，它可能如下所示：
.wheel { width:40px; height:40px; background:url(wheel.png); } .wheel:hover { -webkit-animation-name: spin; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-duration: 3s; }
我一直在用
$.fn.rotate = function(degrees, step, current) { var self = $(this); current = current || 0; step = step || 5; current += step; self.css({ '-webkit-transform' : 'rotate(' + current + 'deg)', '-moz-transform' : 'rotate(' + current + 'deg)', '-ms-transform' : 'rotate(' + current + 'deg)', 'transform' : 'rotate(' + current + 'deg)' }); if (current != degrees) { setTimeout(function() { self.rotate(degrees, step, current); }, 5); } }; $(".r90").click(function() { $("span").rotate(90) }); $(".r0").click(function() { $("span").rotate(0, -5, 90) });
span { display: inline-block }
potato
如果你只想要一个jQuery选项，这将有效：
$(el).stop().animate( {rotation: 360}, { duration: 500, step: function(now, fx) { $(this).css({"transform": "rotate("+now+"deg)"}); } } );
这适用于jQuery 1.8，它自动处理CSS前缀。 jQuery没有动画旋转，所以我在自定义step函数中放置transform:rotate() 。 它可能只能从0开始工作。
演示： http ： //jsfiddle.net/forresto/ShUgD/
IE9和Mobile Safari 4支持CSS转换但不支持CSS转换，因此我使用Modernizrfunction测试提出了这个简单的垫片：
if (Modernizr.csstransitions) { $(el).css({ "transition": "all 500ms ease-in-out" }); } $(el).click(function(){ var rotateTo = 360; if (Modernizr.csstransitions) { $(el).css({"transform": "rotate("+rotateTo+"deg)"}); } else { $(el).stop().animate( {rotation: rotateTo}, { duration: 500, step: function(now, fx) { $(this).css({"transform": "rotate("+now+"deg)"}); } } ); } });
以上将在可用时使用CSS转换。
根据Peter Ajtai的回答，这是一个小的jquery插件，可以帮助其他人。 我没有在Opera和IE9上测试，但也应该在这些浏览器上运行。
$.fn.rotate = function(until, step, initial, elt) { var _until = (!until)?360:until; var _step = (!step)?1:step; var _initial = (!initial)?0:initial; var _elt = (!elt)?$(this):elt; var deg = _initial + _step; var browser_prefixes = ['-webkit', '-moz', '-o', '-ms']; for (var i=0, l=browser_prefixes.length; i
这对我有用：
function animateRotate (object,fromDeg,toDeg,duration){ var dummy = $('') $(dummy).animate({ "margin-left":toDeg+"px" },{ duration:duration, step: function(now,fx){ $(object).css('transform','rotate(' + now + 'deg)'); } }); };
截至目前，您仍然无法 使用jQuery为旋转设置动画，但您可以使用CSS3动画，然后使用jQuery添加和删除类以使动画发生 。
JSFiddle演示
HTML
CSS3
img { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); transition-duration:0.4s; } .rotate { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); transition-duration:0.4s; }
jQuery的
$(document).ready(function() { $("img").mouseenter(function() { $(this).addClass("rotate"); }); $("img").mouseleave(function() { $(this).removeClass("rotate"); }); });
我需要旋转一个对象，但有一个回调函数。 受John Kern的回答启发，我创造了这个。
function animateRotate (object,fromDeg,toDeg,duration,callback){ var dummy = $('') $(dummy).animate({ "margin-left":toDeg+"px" }, { duration:duration, step: function(now,fx){ $(object).css('transform','rotate(' + now + 'deg)'); if(now == toDeg){ if(typeof callback == "function"){ callback(); } } } } )};
这样做你可以简单地调用对象上的旋转……（在我的情况下，我在一个显示三角形图标上执行它，默认情况下已经旋转到270度并且我再旋转90度到360度，1000毫秒。最后一个参数是动画结束后的回调。
animateRotate($(".disclosure_icon"),270,360,1000,function(){ alert('finished rotate'); });