左侧栏收缩打开效果

       如下为一个左侧菜单栏打开收缩的效果功能。

       //左侧栏收缩效果

        var count=0;
        function sl(){
                //根据html里面id="left"获得："<div id="left" style="width:30%;float:left;height:100%;" valign="top">"
                var left = document.getElementById('left');
                if(count==0){
                    //left.style.width=0;
                    count=1;
                    $("#left").animate({width:"0px"},300);//id="left"样式动画效果在(300毫秒)0.3秒内宽度变为0，即实现了完全收缩。
                    $("#right").animate({width:"100%"},300);//id="right"样式动画效果在(300毫秒)0.3秒内宽度变为100%，即实现了完全展开。
                    setTimeout(function(){
                        $("#name").parent().attr("style","display:none;");
                    },100);
                    $("#slideBtn").attr("class","fa fa-angle-double-right");
                }else{
                    count=0;
                    $("#left").animate({width:"30%"},200);
                    $("#right").animate({width:"70%"},200);
                    $("#name").parent().removeAttr("style");
                    $("#slideBtn").attr("class","fa fa-angle-double-left");
                }
        }