【Jquery】------- Jquery实现左侧页面切换滑入，滑出实例代码展示

1. Jquery实现左侧页面切换滑入，滑出实例代码展示:

1.1 CSS3样式: 

  <style>
     html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
           overflow: hidden;
        }
        /***右侧窗口****/
        .right-block-window{
            width: 50rem;
            height: 100%;
            position: fixed;
            left: 0rem;
            top: 0rem;
        }
        /***左侧切换隐藏按钮****/
        .btn-folded{
            width: 20px;
            height: 60px;
            position: absolute;
            top: 0;
            right: 0;
            outline: none;
            border: none;
            background-color: #072e7d;
            z-index: 222;
            border-bottom-right-radius: 8px;
            color: #fff;
            font-size: 18px;
        }
        .right-block-window-content{
            width: 48.75rem;
            height: 100%;
            background-color: rgba(7,46,125,0.48);
            position: relative;
            left: 0;
            top: 0;
            overflow: auto;
            color: #fff;
            text-align: center;
        }
        .m_player_folded  {
            background-position: -23px 0;
        }
    
    </style>

 2. HTML 代码:

<!--左侧侧窗口-->
<div class="right-block-window" >
    <!--主体-->
    <div class="right-block-window-content" >
        主体内容
    </div>
    <!--左侧切换隐藏按钮-->
    <button type="button" class="btn-folded"><i class="fa fa-angle-double-left"></i> </button>
</div>

 3.Jquery 代码:

<script src="jquery-3.3.1.min.js"></script>
<script >
      
       //左侧切换隐藏按钮 Click
       $('.btn-folded').on('click',function () {
           if(!$('.right-block-window').hasClass('m_player_folded')){
               $(".btn-folded").find("i").removeClass("fa-angle-double-left").addClass("fa-angle-double-right");//图标
               $(".right-block-window").animate({left:"-48.7rem"},800);
           }else{
               $(".btn-folded").find("i").removeClass("fa-angle-double-right").addClass("fa-angle-double-left");//图标
               $(".right-block-window").animate({left:"0"},800);
           }
           $('.right-block-window')
               .delay(0)
               .queue(function () {
                   $(this).toggleClass('m_player_folded').dequeue();
               })
       });
       //endregion
</script>

// 图标地址
//css 样式引用 <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

4.效果如下：