我们知道使用框架来实现上下移入移除，可以直接使用向上滑动()和向下滑动()方法。

向上滑动()方法和向下滑动()方法只会改变元素的高度。如果一个元素的显示属性值为"无",当调用向下滑动()方法时，这个元素将由上至下延伸显示幻灯片向上()方法正好相反，元素将由上到下缩短隐藏。

代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title toggle-jquery 1.9/title script src=' http :3359 cdn。bootscs。com/jquery/1。9 .0/jquery。量滴js '/脚本样式div。集装箱{高度： 320 pxborder: 1px固体# ccc} div。左侧{宽度： 200 px高度： 300像素背景色： # 36f}/style/head body div class=' container ' div class=' left '/div/div button id=' toggle ' toggle/button script $(document).ready(function(){ $('#toggle ')).单击(函数(){ $(').左')。滑动切换(300);});});/脚本/正文/html

那么，要实现左右的滑入滑出呢？

演示如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title toggle-jquery 1.9/title script src=' http :3359 cdn。bootscs。com/jquery/1。9 .0/jquery。量滴js '/脚本样式div。集装箱{高度： 320 pxborder: 1px固体# ccc} div。左侧{宽度： 200 px高度： 300像素背景色： # 36f}/style/head body div class=' container ' div class=' left '/div/div button id=' toggle ' toggle/button script $(document).ready(function(){ $('#toggle ')).单击(函数(){ $(').左')。动画({width:'toggle'}，350)；});});/脚本/正文/html效果如下：

以上这篇框架实现左右滑动的触发器方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。