前言：
目前各位老铁们对“jquery自适应出现滑动”大致比较珍视，看官们都需要知道一些“jquery自适应出现滑动”的相关知识。那么小编也在网摘上收集了一些对于“jquery自适应出现滑动””的相关文章，希望小伙伴们能喜欢，你们一起来了解一下吧！本节我们学习 jQuery 中的滑动，我们可以通过 slideDown()、slideUp()、slideToggle() 方法来实现元素的滑动效果。
slideDown()方法
slideDown() 方法用于实现元素向下滑动效果。如果元素已隐藏，则显示被选元素。
语法如下：
$(selector).slideDown(speed,callback);
参数 speed 用于规定效果的时长，可选值有 slow、fast、毫秒。参数 callback 是滑动完成后所执行的函数名称。
示例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery_侠课岛(9xkd.com)</title><script src="jquery-3.5.1.min.js"></script><script> $(function(){ $(".down").click(function(){ $(".course").slideDown(1500); }); });</script></head><body> <div> <button class="down">点击下滑展开元素</button> <ul class="course" style="display: none;"> <li>Python同学计划</li> <li>PHP常见安全及错误处理</li> <li>JavaScript基础知识梳理</li> <li>Node.js简明入门</li> <li>Python由浅入深入门</li> </ul> </div></body></html>在浏览器中的演示效果：
上述代码中，我们可以通过设置 slideDown() 方法所带的参数，来控制指定元素的下滑所用时长。
slideUp()方法
slideUp() 方法用于实现元素向上滑动效果。如果元素已显示，则隐藏被选元素。
语法如下：
$(selector).slideUp(speed,callback);示例：
slideUp() 的功能其实和 slideDown() 方法刚好相呼应，我们来看一下：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery_侠课岛(9xkd.com)</title><script src="jquery-3.5.1.min.js"></script><script> $(function(){ $(".down").click(function(){ $(".course").slideUp(1500); }); });</script></head><body> <div> <button class="down">点击上滑隐藏元素</button> <ul class="course"> <li>Python同学计划</li> <li>PHP常见安全及错误处理</li> <li>JavaScript基础知识梳理</li> <li>Node.js简明入门</li> <li>Python由浅入深入门</li> </ul> </div></body></html>在浏览器中的演示效果：
slideToggle()方法
slideToggle() 方法通过使用滑动效果来切换元素的可见状态。如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。相当于在 slidedown() 和 slideup() 方法之间切换。
语法如下：
$(selector).slideToggle(speed,callback);示例：
通过 slideToggle() 方法使用滑动效果来切换列表的可见状态：
$(function(){ $(".down").click(function(){ $(".course").slideToggle(1000); });});在浏览器中的演示效果：
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #jquery自适应出现滑动
