jQuery 旋转/变换

Question

我想使用此功能旋转然后停止在特定点或角度。现在该元素只是旋转而不停止。代码如下:

    <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>

感谢您的帮助

Answer 1

只需删除每次旋转一度的行并永远调用脚本即可。

// Animate rotation with a recursive call
setTimeout(function() { rotate(++degree); },65);

然后将所需的值传递到函数中...在此示例中，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 transforms.

这个 jQuery 插件应该为旋转设置动画:

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