jQuery 旋转/变换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7936396/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery rotate/transform
提问by Andrea
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>
Thanks for your help
谢谢你的帮助
回答by Sparky
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);
Then pass the desired value into the function... in this example 45for 45 degrees.
然后将所需的值传递给函数...在本例中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)'});
}
});
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...
更改.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);
}
});
EDIT:The standard jQuery CSS animation code above is not working because apparently, jQuery .animate()does not yet support the CSS3 transforms.
编辑：上面的标准 jQuery CSS 动画代码不起作用，因为显然 jQuery.animate()尚不支持 CSS3 transforms。
This jQuery plugin is supposed to animate the rotation:
这个 jQuery 插件应该为旋转设置动画：
回答by switz
It's because you have a recursive function inside of rotate. It's calling itself again:
这是因为您在旋转内部有一个递归函数。它又在叫自己：
// Animate rotation with a recursive call
setTimeout(function() { rotate(++degree); },65);
Take that out and it won't keep on running recursively.
去掉它，它就不会继续递归运行了。
I would also suggest just using this function instead:
我还建议只使用此功能：
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
});
}
It's much cleaner and will work for the most amount of browsers.
它更干净，适用于大多数浏览器。
回答by cpi
Why not just use, toggleClass on click?
为什么不直接使用，toggleClass 点击？
js:
js：
$(this).toggleClass("up");
css:
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;
}
you can also add this to the css:
您还可以将其添加到 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;
}
which will add the animation.
这将添加动画。
PS...
附注...
to answer your original question:
回答你原来的问题：
you said that it rotates but never stops. When using set timeout you need to make sure you have a condition that will not call settimeout or else it will run forever. So for your code:
你说它旋转但永不停止。使用 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>
回答by Raza
I came up with some kind of solution to the problem. It involves jquery and css. This works like toggle but instead of toggling the display of elements it just changes its properties upon alternate clicks. Upon clicking the div it rotates the element with tag 180 degrees and when you click it again the element with tag returns to its original position. If you want to change the animation duration just change transition-duration property.
我想出了某种解决问题的方法。它涉及jquery和css。这类似于切换，但不是切换元素的显示，它只是在交替单击时更改其属性。单击 div 后，它会将带有标签的元素旋转 180 度，当您再次单击它时，带有标签的元素将返回其原始位置。如果您想更改动画持续时间，只需更改 transition-duration 属性。
CSS
CSS
#example1{
transition-duration:1s;
}
jQuery
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)'});
}
});
});
});
回答by Sams
t = setTimeout(function() { rotate(++degree); },65);
and clearTimeoutto stop
并clearTimeout停止
clearTimeout(t);
I use this with AJAX
我将它与 AJAX 一起使用
success:function(){ clearTimeout(t); }
