我想使用此功能旋转，然后停止在特定的点或度。现在，元素只是旋转而不停止。以下是代码：
<script type="text/javascript">
$(function() {
var $elie = $("#bkgimg");
rotate(0);
function rotate(degree) {
// For webkit browsers: e.g. Chrome
$elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
// For Mozilla browser: e.g. Firefox
$elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
// Animate rotation with a recursive call
setTimeout(function() { rotate(++degree); },65);
}
});
</script>
谢谢你的帮助
解决方法
只需删除一次旋转一度的线，并永远调用脚本。
// Animate rotation with a recursive call
setTimeout(function() { rotate(++degree); },65);
然后将所需的值传递到本例45中的函数中45度45度。
$(function() {
var $elie = $("#bkgimg");
rotate(45);
function rotate(degree) {
// For webkit browsers: e.g. Chrome
$elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
// For Mozilla browser: e.g. Firefox
$elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
}
});
将.css()更改为.animate()为animate the rotation with jQuery.我们还需要为动画添加一个持续时间，5000秒为5秒。并更新您的原始功能，以消除一些冗余和支持更多的浏览器…
$(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转换。
这个jQuery插件应该是旋转的动画：
