jQuery动画图像旋转

Question

我有一个带有子菜单的导航条和一个可单击的箭头，该箭头将使子菜单向下(已经使用jQuery slideToggle())，并且我正在尝试使用jQueryRotate.js来慢慢地旋转箭头和菜单。

所以..。向上指向菜单的箭头被收回，箭头向下指向菜单显示。我尝试过使用jQuery animate()，但没有成功。

这是我的小提琴： http://jsfiddle.net/mYQNL/2/

第一个也是最明显的问题是，当菜单被收回时，箭头不会旋转到指向上。

任何帮助都将不胜感激！

Answer 1

用这个试试：

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库来旋转图像。

修正后的jsFiddle

我建议你学习HTML和CSS的基础知识，因为如果没有它，你就永远无法创建一个在所有浏览器和设备上都能完美工作并具有良好性能的网站。

看看语码学校吧，那里有一些免费的课程，涵盖了基础知识。

Answer 2

你也可以这样做：

var currAngle = $(this).getRotateAngle();
if(currAngle == 180){
        $(this).rotate(0);
    }
    else{
        $(this).rotate(180);
    }

若要更好地控制轮调，请使用：

var currAngle = $(this).getRotateAngle();
if(currAngle == 180){
    $(this).rotate({
        duration:1300,
        angle:180,
        animateTo:0
    });
}
else{
    $(this).rotate({
        duration: 1300,
        angle:0,
        animateTo: 180
    });
}

Answer 3

$("#row-1").click(function(){
    value1 += delta1;
    delta1 = -delta1;
    $("#image1").rotate({ animateTo:value1});
});

将第1行作为id添加到图像所在的列中，然后将图像作为id添加到图像中。