JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button>Click me to slide</button>
<div class="container">
  <div id="one">
</div>
  <div id="two">
</div>
</div>

CSS

.container{
  width:300px;
  height:200px;
  overflow:hidden;
}
#one{
  background:blue;
   width:300px;
  height:200px;
}
#two{
  background:purple;
   width:300px;
  display:none;
  height:200px;
}

JavaScript

var sliding = false;
$('button').on('click dblclick', function(){
  if(!sliding){
    sliding = true;
    $('#one').fadeOut('slow', function(){
      $('#two').toggle('slide', {direction: 'right'}, 800, function(){
        sliding = false;
      });
    });
  }
});