我想使用此功能旋转,然后停止在特定的点或度。现在,元素只是旋转而不停止。以下是代码:
@H_403_2@<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>
谢谢你的帮助
解决方法
只需删除一次旋转一度的线,并永远调用脚本。
@H_403_2@// Animate rotation with a recursive call
setTimeout(function() { rotate(++degree); },65);
然后将所需的值传递到本例45中的函数中45度45度。
@H_403_2@$(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秒。并更新您的原始功能,以消除一些冗余和支持更多的浏览器…
@H_403_2@$(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插件应该是旋转的动画: