jQuery rotate/transform

前端之家收集整理的这篇文章主要介绍了jQuery rotate/transform前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想使用此功能旋转,然后停止在特定的点或度。现在,元素只是旋转而不停止。以下是代码: @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插件应该是旋转的动画:

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

猜你在找的jQuery相关文章