jQueryのアニメーション機能を使用して、左から右にスライドさせる方法は？

Question

を絶対top: 0px;とleft: -300px;としたのは、です。 幅は300pxです。この位置に来るように左から右にスライドしたいのですが、left: 0px;をクリックしてボタンをクリックすると、jQueryのアニメーション機能で位置left: -300px;〜left: 0px;を切り替えることができます。

これは私が今行っていることです。

$(document).ready(function(){ 
    $("#controls").click(function(){ 
     $("#hiddenSideBar").animate({left: '0px'}); 
    }) 
}); 

さて、は左から右に一度ボタンをクリックしますが、ボタンを何にもう一度クリックしたときにスライドさhiddenSideBarが起こると、このhiddenSideBarは、本体に表示されたまま。

ここはデモです。 demo of my issue on jsFiddle

申し訳ありませんが、私はそれをはっきり説明できなかったらどうですか？しかし、これは私が実際にやりたいことです。

Answer 1

クラストグルを使用することをお勧めします。より管理しやすいIMOです。

jQueryの

$(document).ready(function(){ 
    $("#controls").click(function(){ 
     $("#hiddenSideBar").toggleClass("show"); 
    }) 
}); 

CSS

#hiddenSideBar { 
    transition: left .3s; 
    left: -300px; 
    ... 
} 

#hiddenSideBar.show { 
    left: 0; 
}