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。但是你不需要這麼做，因爲你正在爲單個元素製作動畫。

Answer 2

設定時間段，以hide()方法來製作動畫：

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

或者你可以使用​​方法。