jQuery旋转/变换

我想使用此功能旋转，然后在特定的点或程度停止。此时元素只是旋转而不停止。下面的代码：jQuery旋转/变换

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

感谢您的帮助

来源

2011-10-29 Andrea

简单地删除它旋转一次在一个程度，永远调用脚本行。

// 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。我们还需要为动画添加一个持续时间，持续5秒5000。并更新原有的功能，以消除一些冗余，支持更多的浏览器...

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

来源

2011-10-29 01:34:14 Sparky

这只是旋转图像。我真的希望它动画/旋转，并停在某个点或某个程度。对不起，我应该在之前提到过。谢谢。 – Andrea

@Andrea，我在Safari中查看你的页面，图像旋转45度。在控制台中查看DOM，它显示已经应用了'-webkit-transform'的正确CSS。也许你的浏览器不支持CSS 3. – Sparky

@Andrea，只需将'.css'改为'.animate'即可。看我的编辑。 – Sparky

这是因为你有旋转的内部递归函数。它再次调用自己：

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

    }); 
}

这是更清洁，会为浏览器的最大量工作。

来源

2011-10-29 01:34:19 switz

为什么不直接点击使用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>

来源

2012-02-24 23:00:52 cpi

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

和clearTimeout停止

clearTimeout(t);

我用这个用AJAX

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

来源

2012-03-10 13:05:57 Sams

我想出了某种问题的解决方案。它涉及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)'}); 
     } 
    });

}）;

来源

2015-09-12 21:11:34 Raza

jQuery旋转/变换

回答

相关问题