jquery滑动

jQuery 滑动效果实现方法

使用 slideDown() 和 slideUp()

slideDown() 用于向下滑动显示元素，slideUp() 用于向上滑动隐藏元素。两者均可设置动画持续时间（毫秒）和回调函数。

// 显示元素
$("#element").slideDown(500);

// 隐藏元素
$("#element").slideUp(500, function() {
    console.log("滑动完成");
});

使用 slideToggle()

slideToggle() 根据当前状态自动切换显示或隐藏，适合按钮触发场景。

$("#toggleButton").click(function() {
    $("#element").slideToggle(300);
});

自定义滑动动画

通过 animate() 结合 CSS 的 height 或 margin 属性实现更灵活的滑动效果。

$("#customSlide").click(function() {
    $("#element").animate({
        height: "toggle",
        marginTop: "20px"
    }, 600);
});

缓动效果（Easing）

为滑动添加缓动函数（需引入 jQuery UI 或 easing 插件），使动画更平滑。

$("#element").slideDown(1000, "easeOutBounce");

链式滑动

通过回调函数实现多个元素的顺序滑动效果。

$("#element1").slideUp(300, function() {
    $("#element2").slideDown(300);
});

注意事项

• 滑动元素需设置 display: none（初始隐藏）或固定高度（如 height: 0）。
• 避免对已处于动画中的元素重复触发滑动，可用 :animated 选择器检查状态。
• 移动端兼容性问题可通过 CSS overflow: hidden 辅助解决。