Jquery效果在运行之前等待之前完成

我希望三个事件一个接一个地运行,所以第一行结束然后第二行在第三行开始后开始…所以下一个元素(效果)应该等到上一个效果结束？

谢谢

原始代码：

$('.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();
    });
});

你接近#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.但是你不需要这样做,因为你是动画单个元素.