Kerby82 Kerby82 - 20 days ago 8
jQuery Question

jQuery UI slide divs seamlessly

I have the following html code:

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


I want to hide the div2 and on a specific event i want to slide out the div1 and slide in the div2 seamlessly.

Below the javascript code where I hide the div2 and do the slide action:

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

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


Everything is working the only problem is that the slide out and slide in of the divs are not on the same level. I can see the div2 coming in below the sliding out of div1 and then take the position of div1.

Where am I wrong?

Answer

To make the animations occur in a synchronous manner, you can use the callback function argument of .hide() to initialize the second animation like so:

$("#div1").hide("slide", { direction: "left" }, 4000, function () {
	$("#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>