Question

希望这不是一个重复的问题，我似乎无法找到答案。这是我的问题：

我在jQuery中完成了悬停动画，我想要的是如果用户悬停另一个链接，我希望第一个动画进行回调而不是再次制作动画。

以下是我到目前为止的一个例子：http://sebastien-crapoulet.fr/test/

如果您有“A propos”链接，您将获得完整的动画，现在我想要的是，如果您从“A propos”转到“Portfolio”，那么A propos回调要完成，而不是执行其他悬停动画。

我已经摆弄了.stop（）和.filter（'：not（：animated）'），但未成功。

这是我到目前为止所得到的：

$('nav ul li a').hover(function(){
    link               = $(this)
    color              = $(this).data("color")
    position           = link.position();
    background         = $('.menuBackground')

    if (color=="blue"){
        background.css({
            'background-color':'#99b3c4',
            'width':(position.left)+(link.width())+20+'px',
            'top':position.top+'px'
        })
        background.stop().animate({
            left:'0%'
        },500)
    }
    if (color=="green"){
        background.css({
            'background-color':'#91b6a5',
            'width':(position.left)+(link.width())+20+'px',
            'top':position.top+'px'
        })
        background.stop().animate({
            left:'0%'
        },500)
    }
    else {
        return false;
    }
},function(){
    background.stop().animate({
        left:'-100%'
    },500)
    return false;
})

提前感谢您提供任何帮助！

Answer 1

当用户将鼠标悬停在第一个元素上时，关闭第二个元素并打开第一个元素，反之亦然。

在执行其他操作之前等待悬停动画完成

1 个答案: