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

Question

我正在尝试根据菜单 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 部分，动画就会变得跳跃且不稳定。

有没有更好的方法来获得结果？或者是我的逻辑有问题，因为我不明白为什么我需要空的鼠标悬停才能使其顺利工作。

Answer 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/

希望这有帮助!