JQuery'de animasyon işlevini kullanarak soldan sağa nasıl kaydırılır?

Question

'u mutlak ve left: -300px; olarak konumlandırdım. Genişlik 300px, Bu pozisyona gelebileceği gibi soldan sağa kaydırmak istiyorum, left: 0px; ve bunun tersi veya butonu ile jQuery öğesindeki animate işlevi aracılığıyla left: -300px; ile left: 0px; arasında geçiş yapabilirsiniz.

Şu anda yaptığım şey budur.

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

Şimdi hiddenSideBar sağ kez düğmesine tıklayarak ama düğme hiçbir şey tekrar tıklandığında soldan kayıyor olur ve bu hiddenSideBar vücutta görünür kalır.

İşte, demo. demo of my issue on jsFiddle

Üzgünüm, açık bir şekilde açıklayamasaydım? Ama aslında bunu yapmak istediğim şey bu.

Answer 1

Bir sınıf geçişi kullanmanızı öneririm, daha kolay yönetilebilir IMO'dur.

jQuery

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

CSS

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

#hiddenSideBar.show { 
    left: 0; 
}