2

我正在尝试根据菜单 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 部分，动画会变得跳跃和断断续续。

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

4

2 回答 2

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/

希望这可以帮助！

于 2012-11-21T20:55:17.187 回答
0

我会像这样构造它（包括分号）：

$(function() {
    $('.top-nav ul li').mouseenter(function() {
        var position = $(this).position();
        $(this).parent().animate({
            'backgroundPosition': position.left
        }, 150);
    })
    .mouseout(function() {
        $(this).parent().animate();
    })
});​
于 2012-11-21T20:50:41.140 回答