Toggle 显示隐藏

简介

本框架一共设计了三组“显示/隐藏”的函数工具,以满足不同场景的需求。

  • slide组:包含axSlideDown、axSlideUp、axSlideToggle
  • fade组:包含axFadeIn、axFadeOut、axFadeToggle
  • Show/Hide组:包含axShow、axHide、axToggle
axSlideDown axSlideUp axSlideToggle
一千年前的中国已经摆脱前代沉迷于异族的宗教,和以外国宗教为自己国教的状态。一千年前中国自己的宗教道教、儒教大放光芒,远远压过外国,这是国家文化强大民族自信的表现,一千年前的中国人自信得一塌糊涂。
axFadeIn axFadeOut axFadeToggle
一千年前的中国已经摆脱前代沉迷于异族的宗教,和以外国宗教为自己国教的状态。一千年前中国自己的宗教道教、儒教大放光芒,远远压过外国,这是国家文化强大民族自信的表现,一千年前的中国人自信得一塌糊涂。
axShow axHide axToggle
一千年前的中国已经摆脱前代沉迷于异族的宗教,和以外国宗教为自己国教的状态。一千年前中国自己的宗教道教、儒教大放光芒,远远压过外国,这是国家文化强大民族自信的表现,一千年前的中国人自信得一塌糊涂。
  •                                     <div class="ax-row">
                                            <div class="ax-col ax-col-8">
                                                <a href="###" class="ax-btn ax-sm" id="sd">axSlideDown</a>
                                                <a href="###" class="ax-btn ax-sm" id="su">axSlideUp</a>
                                                <a href="###" class="ax-btn ax-sm" id="st">axSlideToggle</a>
                                                <div class="ax-break"></div>
                                                <div class="ax-padding ax-border" id="sc">
                                                    一千年前的中国已经摆脱前代沉迷于异族的宗教,和以外国宗教为自己国教的状态。一千年前中国自己的宗教道教、儒教大放光芒,远远压过外国,这是国家文化强大民族自信的表现,一千年前的中国人自信得一塌糊涂。
                                                </div>
                                            </div>
                                            <span class="ax-gutter"></span>
                                            <div class="ax-col ax-col-8">
                                                <a href="###" class="ax-btn ax-sm" id="fi">axFadeIn</a>
                                                <a href="###" class="ax-btn ax-sm" id="fo">axFadeOut</a>
                                                <a href="###" class="ax-btn ax-sm" id="ft">axFadeToggle</a>
                                                <div class="ax-break"></div>
                                                <div class="ax-padding ax-border" id="fc">
                                                    一千年前的中国已经摆脱前代沉迷于异族的宗教,和以外国宗教为自己国教的状态。一千年前中国自己的宗教道教、儒教大放光芒,远远压过外国,这是国家文化强大民族自信的表现,一千年前的中国人自信得一塌糊涂。
                                                </div>
                                            </div>
                                            <span class="ax-gutter"></span>
                                            <div class="ax-col ax-col-8">
                                                <a href="###" class="ax-btn ax-sm" id="show">axShow</a>
                                                <a href="###" class="ax-btn ax-sm" id="hide">axHide</a>
                                                <a href="###" class="ax-btn ax-sm" id="sht">axToggle</a>
                                                <div class="ax-break"></div>
                                                <div class="ax-padding ax-border" id="shc">
                                                    一千年前的中国已经摆脱前代沉迷于异族的宗教,和以外国宗教为自己国教的状态。一千年前中国自己的宗教道教、儒教大放光芒,远远压过外国,这是国家文化强大民族自信的表现,一千年前的中国人自信得一塌糊涂。
                                                </div>
                                            </div>
                                        </div>
                                            
  •             //slide
               let sc = document.querySelector('#sc');
               document.querySelector('#sd').onclick = function(){
                   axSlideDown(sc);
               }
               document.querySelector('#su').onclick = function(){
                   axSlideUp(sc);
               }
               document.querySelector('#st').onclick = function(){
                   axSlideToggle(sc);
               }
               //fade
               let fc = document.querySelector('#fc');
               document.querySelector('#fi').onclick = function(){
                   axFadeIn(fc);
               }
               document.querySelector('#fo').onclick = function(){
                   axFadeOut(fc);
               }
               document.querySelector('#ft').onclick = function(){
                   axFadeToggle(fc);
               }
               //show/hide
               let shc = document.querySelector('#shc');
               document.querySelector('#show').onclick = function(){
                   axShow(shc);
               }
               document.querySelector('#hide').onclick = function(){
                   axHide(shc);
               }
               document.querySelector('#sht').onclick = function(){
                   axToggle(shc);
               }
                                            

axSlideDown

擦出内容动画。

完整写法:axSlideDown(elem, callback, duration, curve),可简写axSlideDown(elem),参数说明如下:

  • elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
  • callback:回调函数,无参数
  • duration:持续时长,单位毫秒,如果为空则根据对象高度自动创建
  • curve:动画曲线,可填linear(匀速)、easeIn(由慢变快)、easeOut(由快变慢)、easeInOut(先快后慢)和easeOutIn(先慢后快),默认为easeOut

举例:axSlideDown('#demo', '', 500, 'easeIn')

axSlideUp

擦除内容动画。

完整写法:axSlideUp(elem, callback, duration, curve),可简写axSlideUp(elem),参数说明如下:

  • elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
  • callback:回调函数,无参数
  • duration:持续时长,单位毫秒,如果为空则根据对象高度自动创建
  • curve:动画曲线,可填linear(匀速)、easeIn(由慢变快)、easeOut(由快变慢)、easeInOut(先快后慢)和easeOutIn(先慢后快),默认为easeOut

举例:axSlideUp('#demo', '', 500, 'easeIn')

axSlideToggle

擦除内容切换动画。

完整写法:axSlideToggle(elem, callback, duration, curve),可简写axSlideToggle(elem),参数说明如下:

  • elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
  • callback:回调函数,无参数
  • duration:持续时长,单位毫秒,如果为空则根据对象高度自动创建
  • curve:动画曲线,可填linear(匀速)、easeIn(由慢变快)、easeOut(由快变慢)、easeInOut(先快后慢)和easeOutIn(先慢后快),默认为easeOut

举例:axSlideToggle('#demo', '', 500, 'easeIn')

axFadeIn

渐变显示动画。

完整写法:axFadeIn(elem, display,callback, duration, curve),可简写axFadeIn(elem),参数说明如下:

  • elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
  • display:选填项,表示css中display的属性值,可以填"block"和"flex"等
  • callback:回调函数,无参数
  • duration:持续时长,单位毫秒,默认200
  • curve:动画曲线,可填linear(匀速)、easeIn(由慢变快)、easeOut(由快变慢)、easeInOut(先快后慢)和easeOutIn(先慢后快),默认为linear

举例:axFadeIn('#demo','', '', 500, 'easeIn')

axFadeOut

渐变隐藏动画。

完整写法:axFadeOut(elem, callback, duration, curve),可简写axFadeOut(elem),参数说明如下:

  • elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
  • callback:回调函数,无参数
  • duration:持续时长,单位毫秒,默认200
  • curve:动画曲线,可填linear(匀速)、easeIn(由慢变快)、easeOut(由快变慢)、easeInOut(先快后慢)和easeOutIn(先慢后快),默认为linear

举例:axFadeOut('#demo', '', 500, 'easeIn')

axFadeToggle

渐变隐藏动画。

完整写法:axFadeToggle(elem, display,inCallback,outCallback, duration, curve),可简写axFadeToggle(elem),参数说明如下:

  • elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
  • display:选填项,表示css中display的属性值,可以填"block"和"flex"等
  • inCallback:显示时回调函数,无参数
  • outCallback:隐藏时回调函数,无参数
  • duration:持续时长,单位毫秒,默认200
  • curve:动画曲线,可填linear(匀速)、easeIn(由慢变快)、easeOut(由快变慢)、easeInOut(先快后慢)和easeOutIn(先慢后快),默认为linear

举例:axFadeToggle('#demo', '','','', 500, 'easeIn')

axShow

直接显示内容。

完整写法:axShow(elem, show, callback),可简写axShow(elem),参数说明如下:

  • elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
  • show:显示的样式,默认是block,可选box、inline-block、block以及visible(将使用visibility:visible)
  • callback:回调函数,无参数

举例:axShow('#demo', 'inline-block', '')

axHide

直接显示内容。

完整写法:axHide(elem, hide, callback),可简写axHide(elem),参数说明如下:

  • elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
  • hide:隐藏的样式,默认是none,可选hidden(将使用visibility:hidden)
  • callback:回调函数,无参数

举例:axHide('#demo', 'hidden', '')

axToggle

简单切换显示和隐藏。

完整写法:axToggle(elem,show, hide, showCallback,hideCallback),可简写axToggle(elem),参数说明如下:

  • elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
  • show:显示的样式,默认是block,可选box、inline-block、block以及visible(将使用visibility:visible)
  • hide:隐藏的样式,默认是none,可选hidden(将使用visibility:hidden)
  • showCallback:显示时回调函数,无参数
  • hideCallback:隐藏时回调函数,无参数

举例:axToggle('#demo', 'hidden', '')

注意:show和hide的样式应该是相对应的,比如show设为'visible',那么hide应该设为'hidden'(使用visibility属性来实现显示和隐藏)。

axHeightDown

Dom高度从0到最大。

完整写法:axHeightDown(elem,arrHeight, callback, duration, curve),可简写axHeightDown(elem),参数说明如下:

  • elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
  • arrHeight:元素高度部分,包含五个部分:{height:100,parginTop:10,paddingBottom:10,marginTop:10,marginBottom:10}
  • callback:回调函数,无参数
  • duration:持续时长,单位毫秒,默认200
  • curve:动画曲线,可填linear(匀速)、easeIn(由慢变快)、easeOut(由快变慢)、easeInOut(先快后慢)和easeOutIn(先慢后快),默认为linear

举例:axHeightDown('#demo', {height:600})

axHeightUp

Dom高度从最大到0。

完整写法:axHeightUp(elem,arrHeight, callback, duration, curve),可简写axHeightUp(elem),参数说明如下:

  • elem:可以填"#id"、".className"、"div"等原生选择器以及Dom对象
  • arrHeight:元素高度部分,包含五个部分:{height:100,parginTop:10,paddingBottom:10,marginTop:10,marginBottom:10}
  • callback:回调函数,无参数
  • duration:持续时长,单位毫秒,默认200
  • curve:动画曲线,可填linear(匀速)、easeIn(由慢变快)、easeOut(由快变慢)、easeInOut(先快后慢)和easeOutIn(先慢后快),默认为linear

举例:axHeightUp('#demo', {height:600})

从0~最大 从最大到0
一千年前的中国已经摆脱前代沉迷于异族的宗教,和以外国宗教为自己国教的状态。一千年前中国自己的宗教道教、儒教大放光芒,远远压过外国,这是国家文化强大民族自信的表现,一千年前的中国人自信得一塌糊涂。
  •                                             <a href="###" class="ax-btn" id="ztm">从0~最大</a>
                                                <a href="###" class="ax-btn" id="mtz">从最大到0</a>
                                                <div class="ax-padding ax-border" id="box">
                                                    一千年前的中国已经摆脱前代沉迷于异族的宗教,和以外国宗教为自己国教的状态。一千年前中国自己的宗教道教、儒教大放光芒,远远压过外国,这是国家文化强大民族自信的表现,一千年前的中国人自信得一塌糊涂。
                                                </div>
                                            
  •                                             document.querySelector('#ztm').onclick = function () {
                                                    axHeightDown('#box',{height:200});
                                                };
                                                document.querySelector('#mtz').onclick = function () {
                                                    axHeightUp('#box',{height:200});
                                                };