javascript - jQuery动画图像旋转

Question

我有一个带有子菜单的导航栏和一个可以单击的箭头，它将关闭子菜单（已经使用 jQuery slideToggle()），我正在尝试使用jQueryRotate.js菜单来缓慢地旋转箭头。

所以...箭头指向上方，菜单缩回，箭头指向下方，菜单显示。我尝试使用 jQueryanimate()没有成功。

这是我的小提琴：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 库来旋转图像。

带有更正 HTML 的 jsFiddle

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

不妨看看Codeschool，那里有一些涵盖基础知识的免费课程。

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 添加到图像中。