Jquery 效果等待前一个完成后再运行

Question

我希望三个事件一个接一个地运行，所以第一行完成，然后第二行在第三行开始后开始...所以下一个元素(效果)应该等到上一个效果完成为止？

谢谢

原始代码:

$('.login_menu_arrow.top').click(function(event)
{
    $("#login_menu").slideUp();
    $('.login_menu_arrow.top').hide();
    $('.login_menu_arrow.bottom').show();
    event.stopPropagation();
});

我的测试不起作用:

来源:A way to chain a sequence of events in JQuery?

1:

$('.login_menu_arrow.top').click(function(event)
{
    $("#login_menu").slideUp(function() {
        $('.login_menu_arrow.top').hide(function() {
            $('.login_menu_arrow.bottom').show();
        });
    });
});

来源:How do you get JQuery to wait until an effect is finished?

2:

$('.login_menu_arrow.top').click(function(event)
{
    $(this).queue(function() {
        $("#login_menu").slideUp();
        $(this).dequeue();
    }).queue(function() {
        $('.login_menu_arrow.top').hide();
        $(this).dequeue();
    }).queue(function() {
        $('.login_menu_arrow.bottom').show();
        $(this).dequeue();
    });
});

Answer 1

你与#1很接近，但是hide不是动画效果unless you call it with a duration ，所以你不使用回调:

$('.login_menu_arrow.top').click(function(event)
{
    $("#login_menu").slideUp(function() {
        $('.login_menu_arrow.top').hide();
        $('.login_menu_arrow.bottom').show();
    });
});

请注意，这是有效的，因为您正在为单个元素设置动画 (#login_menu)。如果您要对多个元素进行动画处理，则会多次调用回调(每个元素完成时调用一次)。如果您要对多个元素进行动画处理并希望在所有元素完成后进行一次回调，则可以在启动动画后使用 promise as shown in this example 。但您不需要这样做，因为您正在为单个元素设置动画。