jQuery动画图像旋转 [英] jQuery animate image rotation

问题描述

我有一个带有子菜单的导航栏和一个单击的箭头，这将拉下子菜单(已经使用jQuery slideToggle())，并且我正在尝试使用jQueryRotate.js来缓慢旋转菜单的箭头

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.js to rotate the arrow, slowly, with the menu.

因此...退出菜单的向上箭头和显示菜单的向下箭头.我尝试使用jQuery animate()失败.

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.

这是我的小提琴: 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.

任何帮助将不胜感激！

推荐答案

尝试使用此方法:

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

jsFiddle

顺便说一句:我建议使用 CSS转换而不是用于旋转图像的jQuery库.

BTW: I would recommend using CSS transform instead of a jQuery library for rotating the image.

具有正确HTML的jsFiddle

我建议您学习HTML和CSS的基础知识，因为没有它，您将永远无法创建一个在所有浏览器和设备上都能正常运行并具有良好性能的网站.

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.

也许看看 Codeschool ，他们那里有一些免费课程，涵盖了基本面.

Take maybe a look at Codeschool, they have some free courses there which cover the fundamentals.

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