JQuery 背景动画 - 这是正确的方法吗？答案

【问题标题】：JQuery background animation - is this the right way to do it?JQuery 背景动画 - 这是正确的方法吗？
【发布时间】：2012-11-21 20:36:45
【问题描述】：

我正在尝试让菜单的背景根据菜单 LI 进行动画处理

我目前的脚本是http://jsfiddle.net/d9LHV/70/

$(function() {
    $('.top-nav ul li').mouseenter(function() {
        var position = $(this).position()
        $(this).parent().animate({
            'backgroundPosition': position.left}, {duration: 150})
    })
    .mouseout(function() {
        $(this).parent().animate({})
    })
});

似乎可以工作，但对 jQuery 感觉有些不对劲，但我没有任何 jQuery 经验，希望得到一些意见。

如果我使用 .hover 或取出 .mouseout 部分，动画会变得跳跃和断断续续。

有没有更好的方法来获得结果？或者我的逻辑有些不对劲，因为我不明白为什么我需要空鼠标来使其顺利运行。

【问题讨论】：

您在某些地方缺少分号。此外，您不需要{duration: 150}，只需150 无需大括号即可自行完成。在第二个animate() 函数中也不需要空的{}。
非常感谢。我已经清理了一下，但我不确定半列应该去哪里。我假设一个会在位置变量之后？我仍然有点难过为什么没有鼠标悬停或悬停它就不起作用。我想这没关系，因为它正在工作我只是想在进入新图书馆时学习正确的做法。
添加了一个答案，因为它更容易显示分号。

标签： jquery animation background jquery-animate

【解决方案1】：

好吧，它之所以变得跳跃和断断续续，是因为在相同元素上触发了多个动画事件，因此它将所有这些事件排成队列并一个接一个地运行。

你可以做的是在开始另一个动画之前使用.stop()函数，像这样：

$(function() {
    $('.top-nav ul li').mouseenter(function() {
        var position = $(this).position();
        $(this).parent().stop().animate({'backgroundPosition': position.left}, 150);
    });
});

这里的工作演示：http://jsfiddle.net/pulkitm/d9LHV/71/

希望这会有所帮助！

【讨论】：

是的！现在这是有道理的。我没有想到 .stop 而是用鼠标悬停结束该功能。我知道有些东西不合适，但我不能把我的手指放在它上面。非常感谢，这正是我想要的！
当然不是。直接点右边的绿色对勾，对吗？
是的，你检查过了。好的！ :)

【解决方案2】：

我会这样组织它（包括分号）：

$(function() {
    $('.top-nav ul li').mouseenter(function() {
        var position = $(this).position();
        $(this).parent().animate({
            'backgroundPosition': position.left
        }, 150);
    })
    .mouseout(function() {
        $(this).parent().animate();
    })
});

【讨论】：

谢谢，这就是 jfiddle 在“整理”时在下一行降低过渡时间时给出的结果，但无论出于何种原因，它在我的本地环境中都不起作用。