菜鸟教程
教程 jquery tutorial

滑动效果

jQuery 的滑动动画可以实现元素在垂直方向上的平滑展开与收起，常用于手风琴菜单、折叠面板等交互场景。

常用滑动方法

slideDown([speed, callback])

元素由上向下展开显示。

js 
$("#panel").slideDown();

slideUp([speed, callback])

元素向上收起隐藏。

js 
$("#panel").slideUp();

slideToggle([speed, callback])

在展开和收起之间切换。

js 
$("#panel").slideToggle(600);

应用场景

  • FAQ 折叠问答
  • 手风琴导航菜单
  • 下拉面板或隐藏内容的展开与收起

示例代码

在线代码演示
源码 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(function () {
    $("#btnDown").click(function () {
      $("#panel").slideDown();
    });
    $("#btnUp").click(function () {
      $("#panel").slideUp();
    });
    $("#btnToggle").click(function () {
      $("#panel").slideToggle();
    });
  });
</script>

<button id="btnDown">展开内容</button>
<button id="btnUp">收起内容</button>
<button id="btnToggle">切换滑动</button>


<div
id="panel"
style="
display: none;
width: 300px;
padding: 15px;
background: #ffc107;
margin-top: 10px;
"
>
这是可以滑动展开或收起的内容。
</div>

相关内容