左侧栏收缩打开效果

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

       //左侧栏收缩效果

        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");
                }
        }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值