JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="slide-1"><a href="#slide-2">Slide div next</a></div>
<div id="slide-2" style="display:none;"><a href="#slide-1">Slide div prev</a> - <a href="#slide-3">Slide div next</a></div>
<div id="slide-3" style="display:none;"><a href="#slide-2">Slide div prev</a></div>

CSS

#slide-1, #slide-2, #slide-3{
    width:100%;
    height:500px;
}
#slide-1{
    background:red;
}
#slide-2{
    background:green;
}
#slide-3{
    background:yellow;
}

JavaScript

$('a').on('click', function(){
    var div_hide = $(this).parent();
    var div_show = $(this).attr('href');
    $(div_hide).hide("slide", { direction: "left" }, 500);
    $(div_show).show("slide", { direction: "right" }, 800); //Doesn't work
	//$(div_show).delay(500).show("slide", { direction: "right" }, 800); //Work but i must waiting...
});