jQuery rotate/transform

我想使用此功能旋转，然后停止在特定的点或度。现在，元素只是旋转而不停止。以下是代码：

<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插件应该是旋转的动画：

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

原文地址：https://www.jb51.cc/jquery/182550.html