JQuery Show/HIde Animation

http://stackoverflow.com/q/26891866/1144203

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<div class="mid-box1">Box 1</div>
<div class="mid-box2">Box 2</div>
<a href="#" class="next">Next</a>

CSS

div{
    margin-bottom:10px;
    border:1px solid lightgray;
    width:30%
}

JavaScript

$(document).ready(function() {
    $('.mid-box2').hide();

    $('.next').click(function() {
        $('.mid-box1').hide("slide", { direction: "bottom", align: "center" });
       //$('.mid-box2').show("slide", { direction: "top", align: "center" }, 1000 );

    });
});