javascript - 如何使用 jQuery 中的动画功能从左向右滑动？

Question

我已将 aside 定位为 absolute top: 0px; 和 left: -300px;。它的宽度是 300px，我想从左向右滑动它，因为它可以到达这个位置，left: 0px; 然后通过单击按钮反之亦然，它可以在位置 left 之间切换: -300px; 到 left: 0px; 通过 jQuery 中的动画函数。

这就是我现在所做的。

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

现在，一旦点击按钮，hiddenSideBar 就会从左向右滑动，但是当再次点击按钮时，什么也没有发生，这个 hiddenSideBar 在 body 中仍然可见。

这是演示。 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;
}