jquery горизонтальный слайд без переключения

Question

Предположим, у нас есть кнопка и div с текстом внутри него. Как мы можем сдвинуть div горизонтально (чтобы его исчезнуть) при нажатии кнопки, а затем снова сдвинуть его до его первоначальной ширины, но без использования команды animate ({width: "toggle"})?
http://codepen.io/AndrewRed/pen/MYmWzg

<h5>PUSH</h5> 
<div class="container">Hello World</div> 

$(document).ready(function(){ 
    $("h5").click(function(){ 
    $(".container").animate({width:"0"}); 
}); 
}); 

Answer 1

вы можете просто использовать CSS переходы и классы: из кода: HTML:

<h5>PUSH</h5> 
<div class="container">Hello World</div> 

CSS:

h5{ 
    background: red; 
    display: inline-block; 
    cursor: pointer; 
} 
.container{ 
    background: orange; 
    display: inline-block; 
    width:90px; 
    -webkit-transition: 0.3s, linear; 
    -moz-transition: 0.3s, linear; 
    -ms-transition: 0.3s, linear; 
    -o-transition: 0.3s, linear; 
    transition: 0.3s, linear; 
} 

.container.close{ 
    width:0; 
} 

JS:

$(document).ready(function(){ 
    $("h5").click(function(){ 
    $(".container").toggleClass('close'); 
    }); 

ссылка на код: http://codepen.io/anon/pen/mymJYr