Question

我正在尝试将菜单的背景设置为动画，具体取决于菜单LI

$(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/

希望这有帮助！

Answer 2

我的结构如下（包括半冒号）：

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

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

2 个答案: