jQuery:如何为div旋转设置动画? [英] jQuery: how do I animate a div rotation?
本文介绍了jQuery:如何为div旋转设置动画?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我可以使用CSS旋转div,并使用jquery .rotate旋转,但是我不知道如何对其进行动画处理.
I can rotate a div with css, and jquery .rotate, but i don't know how to animate it.
推荐答案
使用WebkitTransform / -moz-transform: rotate(Xdeg)
.这在IE中不起作用,但是Matt的
Make use of WebkitTransform / -moz-transform: rotate(Xdeg)
. This will not work in IE, but Matt's zachstronaut solution doesn't work in IE either.
如果您也想支持IE,则必须考虑使用canvas
,就像我相信 拉斐尔确实 .
If you want to support IE too, you'll have to look into using a canvas
like I believe Raphael does.
这是一个简单的jQuery代码段,可旋转jQuery对象中的元素.旋转可以开始和停止:
Here is a simple jQuery snippet that rotates the elements in a jQuery object. Rotation can be started and stopped:
$(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();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<input type="button" value=" Toggle Spin " />
<br/><br/><br/><br/>
<img src="http://i.imgur.com/ABktns.jpg" />
这篇关于jQuery:如何为div旋转设置动画?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文