Как сместить влево вправо, используя функцию анимации в jQuery?

Question

Я положил в сторону как абсолютныйtop: 0px; и left: -300px;. Это ширина 300 пикселей, я хочу сдвинуть ее слева направо, так как она может попасть в эту позицию, left: 0px; и нажав кнопку наоборот, она может переключаться между позицией left: -300px; на left: 0px; через функцию анимации в jQuery.

Это то, что я сделал прямо сейчас.

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

Теперь hiddenSideBar скользит слева направо, как только нажав на кнопку, но при повторном нажатии на кнопку ничего не происходит, и это hiddenSideBar остается видимым в теле.

Здесь приведена демонстрация. demo of my issue on jsFiddle

Извините, если я не могу объяснить это четко? Но это то, что я действительно хочу делать.

Answer 1

Я бы рекомендовал использовать переключатель класса, более управляемый ИМО.

JQuery

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

CSS

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

#hiddenSideBar.show { 
    left: 0; 
}