Width transition - select the transition direct for increase and decrease width using jQuery.

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

<style type="text/css">

div {
 background-color: #33b5e5;
 position: relative;
 left: 0;
 height: 100px;
 width: 0;
 transition: all 0.3s linear;
}
.show {
 transition-property: width;
 left: 0;
 width: 200px;
}
.hide {
 transition-property: width, left;
 width: 0;
 left: 200px;
}

</style>

<div></div>
<button type="button" id="btnShow">Show</button>
<br />
<button type="button" id="btnHide">Hide</button>

<script type="text/javascript">

$(document).ready(function() {
 $("#btnShow").click(function() {
   $("div").removeClass("hide").addClass("show");
 });
 $("#btnHide").click(function() {
   $("div").removeClass("show").addClass("hide");
 });
});

</script>


Output :)

1)

2)

3)