Эффекты Jquery ждут преждевременного завершения перед запуском

Question

Я хочу, чтобы три события запускались за другой, так что 1-я строка заканчивается, после чего начинается вторая строка после начала третьей строки ... так что следующий элемент (эффект) должен ждать окончания предыдущего эффекта?

Благодаря

ОРИГИНАЛ КОД:

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

Или вы могли бы использовать fadeOut() метод.