jQuery旋转/变换 [英] jQuery rotate/transform

问题描述

我想使用此功能旋转然后停在特定的点或角度.现在，元素只是旋转而不会停止.这是代码:

I'd like to use this function to rotate then stop at a particular point or degree. Right now the element just rotates without stopping. Here's the code:

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

感谢您的帮助

推荐答案

只需删除一次将其旋转一度的行并永久调用该脚本即可.

Simply remove the line that rotates it one degree at a time and calls the script forever.

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

然后将所需的值传递给函数...在本例中为45 45度.

Then pass the desired value into the function... in this example 45 for 45 degrees.

$(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()以便使用jQuery动画旋转.我们还需要为动画添加一个持续时间，即5000，持续5秒.并更新您的原始功能以消除一些冗余并支持更多浏览器...

Change .css() to .animate() in order to animate the rotation with jQuery. We also need to add a duration for the animation, 5000 for 5 seconds. And updating your original function to remove some redundancy and support more browsers...

$(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.

The standard jQuery CSS animation code above is not working because apparently, jQuery .animate() does not yet support the CSS3 transforms.

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

This jQuery plugin is supposed to animate the rotation:

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

这篇关于jQuery旋转/变换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！