Несколько выпадающего меню перек

Question

У меня есть три (или больше в будущем) выпадающего меню, которые показывают при нажатии на «спусковой крючок»

код является функциональным, но я хочу анимацию slideUp закончить до другой анимации slideDown начинается.

Обратите внимание, что элементы 'DropDown' расположены абсолютно вверху: 100% по отношению к 'контейнера', таким образом они появляются под 'Триггеры'

The code on Codepen

HTML

<div class="container"> 
    <div class="drop-container"> 
    <span class="trigger">Drop 1</span> 
    <div class="dropdown"> 
    <p>First Dropdown</p> 
    </div> 
    </div> 
    <div class="drop-container"> 
    <span class="trigger">Drop 2</span> 
    <div class="dropdown"> 
    <p>Second dropdown</p> 
    </div> 
    </div> 
    <div class="drop-container"> 
    <span class="trigger">Drop 3</span> 
    <div class="dropdown"> 
    <p>Third dropdown</p> 
    </div> 
    </div> 
</div> 

JQuery

var $container = $('.drop-container'), 
    $trigger = $('.trigger'); 

$trigger.on('click',function(){ 

    var $this = $(this).siblings('.dropdown'); 


    $container.find('.dropdown').slideUp(); 

    if($this.is(':visible')) { 
     $this.hide('fast'); 
    } 

    else { 
     $this.slideDown(); 
    } 
}); 

Answer 1

Вы можете просто добавить задержку

$this.delay(500).slideDown(); 

, но, как отметил его в комментариях было бы лучше использовать функцию обратного вызова.

Codepen Example

Answer 2

Существует способ сделать это без использования таймеров. Вы можете в принципе добавить класс к элементу с слайдом вниз и использовать свойство «oncomplete» jQuery slide. Замените JavaScript с ниже, и он должен работать живой пример here

$container = $('.drop-container') 
    $trigger = $('.trigger') 
    $trigger.on('click',function(){ 
    var $drop = $(this).siblings('.dropdown') 
    $down = $container.find('.down') 
    if($down.length > 0){ 
    $down.slideUp(function() { 
     $(this).removeClass('down') 
     $drop.addClass('down') 
     $drop.slideDown() 
    }) 
    } 
    else{ 
     $drop.addClass('down') 
     $drop.slideDown() 
     } 

})