javascript - 将 div 水平折叠到给定宽度

Question

<分区>

Answer 1

请参阅此 fiddle :http://jsfiddle.net/100pvu95/19/

侧边栏有 position: relative(默认为 0/0)。单击切换时，left 动画为 -55%，这使部分侧边栏仍然可见。再次单击时(位于 left: -55%)，它会动画回到初始状态(if/else 条件 + 两个动画):

HTML:

<div id="sidebar">
  SIDEBAR
  <button id="toggle">Toggle</button>
</div>

CSS:

    $(document).ready(function () {
    $("#toggle").on('click', function () {
        var x = $("#sidebar").css("left");
    if(x == '0px') {
        $("#sidebar").animate({
            left: '-55%'
        });
        } else {
        $("#sidebar").animate({
            left: '0'
        });
        }        
    });
});