Jquery等到所有动画完成后再开始新动画

Question

我的菜单包含附加到悬停事件的slideDown / slideup动画。

如果我将鼠标悬停在下一个菜单位置上，而前一个仍然使用slideDown进行动画处理，我想等待slideDown完成，然后才启动slideUp作为当前位置。

我尝试使用promise对象，但它根本不起作用。

$('.menu-2>ul>li').each(function(){
    $(this).hover(
        function(){
            var choice = $('ul', this);
            ('.menu-2>ul>li>ul').promise().done(function(  ) {
                choice.slideDown();

            });

        },
        function(){
            $('ul', this).slideUp(200);
        } 
    );
});

Answer 1

您可以在slideDown完成后添加回调。试试例子：

choice.slideDown("fast",function(){your function})

这只是调用动画完成

<强>更新

$('.menu-2>ul>li').each(function(){
    $(this).hover(
        function(){
            var choice = $('ul', this);
            ('.menu-2>ul>li>ul').promise().done(function(  ) {
                choice.slideDown(500);

            });

        },
        function(){
            $('ul', this).delay(500).slideUp(200);
        } 
    );
});