当前位置：首页 > jquery

jquery滑动事件

2026-02-03 16:15:11jquery

jQuery滑动事件基础

滑动事件在jQuery中通常指元素的显示/隐藏动画效果，主要通过slideUp(), slideDown(), slideToggle()方法实现。这些方法通过改变元素的height属性实现平滑过渡效果。

核心方法：

slideUp(duration, easing, callback)：向上滑动隐藏元素
slideDown(duration, easing, callback)：向下滑动显示元素
slideToggle(duration, easing, callback)：切换滑动状态

参数说明

duration
控制动画速度，可选值：

毫秒数值（如400）
预设字符串："slow"（600ms）、"fast"（200ms）
默认值：400ms

easing
指定动画缓动函数：

默认："swing"（缓入缓出）
可选："linear"（匀速）
需引入jQuery UI扩展更多缓动效果

callback
动画完成后执行的回调函数

基础用法示例

// 隐藏元素
$("#box").slideUp();

// 显示元素（带回调）
$("#box").slideDown("slow", function() {
    console.log("动画完成");
});

// 切换状态
$("#btn").click(function() {
    $("#menu").slideToggle(300);
});

高级滑动控制

停止当前动画
使用stop()方法可中断正在进行的滑动动画：

$("#box").stop(true, true).slideUp();

第一个参数：是否清除动画队列
第二个参数：是否立即完成当前动画

自定义滑动高度
通过CSS限制最大高度实现部分滑动效果：

.panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s;
}

$("#trigger").click(function() {
    $(".panel").css("max-height", "200px");
});

滑动事件结合

可与其它事件结合创建交互效果：

jquery滑动事件

// 鼠标悬停滑动
$(".item").hover(
    function() { $(this).find(".submenu").slideDown(200); },
    function() { $(this).find(".submenu").slideUp(200); }
);

// 滚动检测滑动
$(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
        $("#topBtn").slideDown();
    } else {
        $("#topBtn").slideUp();
    }
});