jQuery动画与效果

1. 显示/隐藏效果

jQuery提供了show()、hide()和toggle()方法来实现元素的显示和隐藏。

隐藏元素 显示元素 切换显示

这是一个演示元素，点击按钮查看效果

代码示例：

// 基本用法
$("#hideBtn").click(function(){
    $("#element").hide();  // 隐藏元素
});

$("#showBtn").click(function(){
    $("#element").show();  // 显示元素
});

$("#toggleBtn").click(function(){
    $("#element").toggle(); // 切换显示/隐藏
});

// 带参数的用法（单位：毫秒）
$("#element").hide(1000);  // 1秒内隐藏
$("#element").show("slow"); // 慢速显示（600ms）
$("#element").toggle("fast"); // 快速切换（200ms）

// 带回调函数
$("#element").hide(1000, function(){
    console.log("隐藏完成！");
});
                            

2. 淡入淡出效果

淡入淡出效果通过改变元素的透明度来实现平滑过渡。

淡入 淡出 切换淡入淡出 淡入到0.5透明度

淡入淡出演示区域

代码示例：

// 淡入效果
$("#fadeInBtn").click(function(){
    $("#element").fadeIn(1000);  // 1秒内淡入
});

// 淡出效果
$("#fadeOutBtn").click(function(){
    $("#element").fadeOut("slow"); // 慢速淡出
});

// 切换淡入淡出
$("#fadeToggleBtn").click(function(){
    $("#element").fadeToggle(500); // 0.5秒切换
});

// 淡入到指定透明度（0-1之间）
$("#fadeToBtn").click(function(){
    $("#element").fadeTo(1000, 0.5); // 1秒内淡入到50%透明度
});

// 带回调函数
$("#element").fadeOut(1000, function(){
    alert("淡出完成！");
});
                            

3. 滑动效果

滑动效果通过改变元素的高度来实现展开和收缩的动画。

向下滑动 向上滑动 切换滑动

滑动内容区域

这是一个可滑动的div元素，点击按钮查看滑动效果。

滑动效果通过改变高度实现平滑过渡。

代码示例：

// 向下滑动（显示）
$("#slideDownBtn").click(function(){
    $("#element").slideDown(800); // 0.8秒向下滑动
});

// 向上滑动（隐藏）
$("#slideUpBtn").click(function(){
    $("#element").slideUp("fast"); // 快速向上滑动
});

// 切换滑动
$("#slideToggleBtn").click(function(){
    $("#element").slideToggle(600); // 0.6秒切换
});

// 链式调用
$("#element")
    .slideUp(500)
    .delay(300)      // 延迟300ms
    .slideDown(500);

// 带回调函数
$("#element").slideUp(1000, function(){
    console.log("向上滑动完成");
});
                            

4. 自定义动画

animate()方法允许创建自定义动画，可以操作多个CSS属性。

移动并变大 颜色和边框变化 重置位置

可动元素

代码示例：

// 基本动画 - 移动元素
$("#animateBtn").click(function(){
    $("#box").animate({
        left: '250px',    // 向右移动250px
        opacity: 0.5,     // 透明度变为0.5
        width: '+=150px', // 宽度增加150px
        height: '+=100px' // 高度增加100px
    }, 1000); // 动画时长1秒
});

// 队列动画 - 多个动画依次执行
$("#queueBtn").click(function(){
    $("#box")
        .animate({left: '300px'}, 500)
        .animate({top: '300px'}, 500)
        .animate({left: '0'}, 500)
        .animate({top: '0'}, 500);
});

// 相对值动画
$("#relativeBtn").click(function(){
    $("#box").animate({
        left: '+=50px',   // 向右移动50px
        height: 'toggle'  // 高度切换（如果当前是显示则隐藏，反之亦然）
    });
});

// 使用预定义值
$("#predefinedBtn").click(function(){
    $("#box").animate({
        height: 'toggle',
        opacity: 'toggle'
    }, 1500);
});

// 停止动画
$("#stopBtn").click(function(){
    $("#box").stop(); // 停止当前动画
});

// 停止所有动画并清除队列
$("#stopAllBtn").click(function(){
    $("#box").stop(true, true);
});
                            

注意：使用animate()时，需要确保元素的position属性设置为relative、fixed或absolute，否则left/top等属性无效。