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() 以便 使用 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

Answer 2

这是因为您在旋转内部有一个递归函数。它再次调用自己：

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

将其取出，它就不会继续递归运行。

我还建议只使用这个函数：

function rotate($el, degrees) {
    $el.css({
  '-webkit-transform' : 'rotate('+degrees+'deg)',
     '-moz-transform' : 'rotate('+degrees+'deg)',  
      '-ms-transform' : 'rotate('+degrees+'deg)',  
       '-o-transform' : 'rotate('+degrees+'deg)',  
          'transform' : 'rotate('+degrees+'deg)',  
               'zoom' : 1

    });
}

它更干净，并且适用于大多数浏览器。

Answer 3

为什么不直接使用点击时的toggleClass？

js:

$(this).toggleClass("up");

css:

button.up {
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
               /* IE6–IE9 */
               filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
                 zoom: 1;
    }

您也可以将其添加到 css: 中，

button{
        -webkit-transition: all 500ms ease-in-out;
        -moz-transition: all 500ms ease-in-out;
        -o-transition: all 500ms ease-in-out;
        -ms-transition: all 500ms ease-in-out;
}

这将添加动画。

PS...

回答你原来的问题：

你说它旋转但永远不会停止。使用 set timeout 时，您需要确保有一个不会调用 settimeout 的条件，否则它将永远运行。所以对于你的代码：

<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)'});


    /* add a condition here for the extremity */ 
    if(degree < 180){
      // Animate rotation with a recursive call
      setTimeout(function() { rotate(++degree); },65);
     }
    }
    });
    </script>

Answer 4

我想出了某种解决问题的方法。涉及到jquery和css。这与切换类似，但不是切换元素的显示，而是在交替单击时更改其属性。单击 div 后，带有标签的元素将旋转 180 度，再次单击时，带有标签的元素将返回到其原始位置。如果你想改变动画持续时间只需改变transition-duration属性。

CSS

#example1{
transition-duration:1s;
}

jQuery

$(document).ready( function ()  {  var toggle = 1;
  $('div').click( function () {
      toggle++;
      if ( (toggle%2)==0){
          $('#example1').css( {'transform': 'rotate(180deg)'});
      }
      else{
          $('#example1').css({'transform': 'rotate(0deg)'});
      }
  });

});

Answer 5

t = setTimeout(function() { rotate(++degree); },65);

和 clearTimeout 来阻止

clearTimeout(t);

我将其与 AJAX 一起使用

success:function(){ clearTimeout(t); }