jQuery动画图像旋转答案

【问题标题】：jQuery animate image rotationjQuery动画图像旋转
【发布时间】：2013-11-06 20:06:06
【问题描述】：

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

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

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

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

任何帮助将不胜感激！

【问题讨论】：

我用更正的小提琴更新了我的答案。
@Sebsemillia 谢谢！我的意思是，我对 CSS 和 HTML 并不差，只是有几件事总是让我陷入困境。那么#posiNav a {display: block; position: relative;}是如何达到预期效果的呢？另外，从用户的角度来看，现在我将li 设置为padding: 5px 0px;，因此锚不会从上到下延伸。现在，如果我将它添加到 #posiNav a 中，它确实可以，但是您认为 lis 之间应该有一些不属于锚点的空间吗？
@Sebsemillia 成品：metsales.com/MetropolitanSales/microsite/posiflex/home.aspx?让我知道你的想法

标签： javascript jquery css

【解决方案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 transform 而不是 jQuery 库来旋转图像。

jsFiddle with corrected HTML

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

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

【讨论】：

效果很好！无论如何要为其设置动画，使其以菜单下降的速度旋转？
@metsales：我更新了我的答案，只是玩弄持续时间，直到你获得所需的时间效果
@Tip_Top 感谢您的反馈！我将按钮分开的原因是因为我将为这些按钮中的每一个提供一个“主页”，如果他们点击li，它将转到主页，而如果他们点击箭头，他们可以然后选择从下拉菜单中。由于鼠标悬停指针，它在 JSFiddle 之外工作得更好一些，但除了让整个 li 下拉下拉菜单之外，您认为向箭头添加一些填充会有所帮助吗？
@tip_top 我完全同意你的看法。我只是想按照他的意愿回答 OP 的问题，而不是将他与可用性混淆..
@metsales：顺便说一句，我只是看到您的列表降价无效..您不能将 a 放在 li 之外，它必须在里面。

【解决方案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
    });
}

【讨论】：

【解决方案3】：

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

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

【讨论】：