【Jquery】------- Jquery+css3 实现左侧切换(滑入,滑出)展示（实例代码）

痛定思痛。 2022-09-02 15:47 93阅读 0赞

> ### 1. 实现左侧切换（滑入，滑出）实例代码: ###

> 1.1 CSS3样式:

>  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.效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2NjU3_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2NjU3_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2NjU3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210804102028595.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2NjU3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2NjU3_size_16_color_FFFFFF_t_70 1]: /images/20220829/9901a8c6ff36472c9ec4dc9e28666846.png