javascript jQuery 动画图像旋转
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19821715/
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 animate image rotation
提问by Adjit
I have a nav bar with sub menus and an arrow to click on that will bring down the submenu (already using jQuery slideToggle()) and I am trying to use jQueryRotate.jsto rotate the arrow, slowly, with the menu.
我有一个带有子菜单的导航栏和一个箭头，点击它会降低子菜单（已经使用 jQuery slideToggle()），我试图用jQueryRotate.js菜单慢慢地旋转箭头。
So... the arrow pointing up with the menu retracted and arrow pointing down with the menu showing. I have tried to use jQuery animate()with no success.
所以...箭头向上，菜单缩回，箭头向下，菜单显示。我曾尝试使用 jQuery animate()，但没有成功。
Here is my fiddle:http://jsfiddle.net/mYQNL/2/
这是我的小提琴：http : //jsfiddle.net/mYQNL/2/
The first and most evident problem is the arrow doesn't rotate back to pointing up when the menu is retracted.
第一个也是最明显的问题是当菜单缩回时箭头不会旋转回指向上。
Any help would be much appreciated!
任何帮助将非常感激！
回答by Sebsemillia
Try it with this:
试试这个：
if($(this).hasClass('rot')) {
$(this).removeClass('rot').rotate({
duration: 200,
angle: 180,
animateTo:0
});
} else {
$(this).addClass('rot').rotate({
duration: 200,
angle: 0,
animateTo:180});
};
BTW: I would recommend using CSS transforminstead of a jQuery library for rotating the image.
顺便说一句：我建议使用CSS 转换而不是 jQuery 库来旋转图像。
I would recommend you learning the basics of HTML and CSS, because without this you will never be able to create a website which will work perfectly and with good performance in all browsers and devices.
我建议您学习 HTML 和 CSS 的基础知识，因为没有这些，您将永远无法创建一个在所有浏览器和设备上都能完美运行并具有良好性能的网站。
Take maybe a look at Codeschool, they have some free courses there which cover the fundamentals.
看看Codeschool，他们那里有一些免费课程，涵盖了基础知识。
回答by Jorge
You could also do it this way:
你也可以这样做：
var currAngle = $(this).getRotateAngle();
if(currAngle == 180){
$(this).rotate(0);
}
else{
$(this).rotate(180);
}
And to have more control over the rotation, use:
为了更好地控制旋转，请使用：
var currAngle = $(this).getRotateAngle();
if(currAngle == 180){
$(this).rotate({
duration:1300,
angle:180,
animateTo:0
});
}
else{
$(this).rotate({
duration: 1300,
angle:0,
animateTo: 180
});
}
回答by Pixel Reaper
$("#row-1").click(function(){
value1 += delta1;
delta1 = -delta1;
$("#image1").rotate({ animateTo:value1});
});
add row-1 as an id to the column that the image is in, and then add image as an id to your image.
将第 1 行作为 id 添加到图像所在的列，然后将图像作为 id 添加到图像中。
