JQuery UI слайд-дивы легко

Question

У меня есть следующий HTML-код:

<div class="col-md-12"> 
<div id="div1" class="col-md-12"> 
    content 
</div> 
<div id="div2" class="col-md-12"> 
    content 
</div> 
</div> 

Я хочу, чтобы скрыть div2 и на конкретном случае я хочу, чтобы выскользнуть Div1 и слайд в div2 легко.

Ниже яваскрипта кода, где я скрыть div2 и сделать действие слайд:

$("#div1").hide(); 

$("#div1").hide("slide", { direction: "left" }, 4000); 
$("#div2").show("slide", { direction: "right" }, 4000); 

Все работает единственная проблема в том, что выдвижная и слайд в из дивы не на том же уровне. Я вижу, что div2 входит ниже скользящего из div1, а затем занимает позицию div1.

Где я ошибаюсь?

Answer 1

Чтобы сделать анимации происходит в синхронном режиме, вы можете использовать функцию обратного вызова аргумент .hide() для инициализации второй анимации, как так:

$("#div1").hide("slide", { direction: "left" }, 4000, function() { 
 
\t $("#div2").show("slide", { direction: "left" }, 4000); 
 
});

#div1,#div2 { 
 
    padding: 10px 20px; 
 
    width: 200px; 
 
    text-align: center; 
 
    border: 1px dotted #000; 
 
}

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 
 
<div class="col-md-12"> 
 
<div id="div1" class="col-md-12"> 
 
    content 
 
</div> 
 
<div id="div2" class="col-md-12" style="display: none;"> 
 
    content 
 
</div> 
 
</div>