fadeIn、fadeOut、slideUp、slideDown、animate等。这些方法应该都是jQuery中常见的动画效果。

隐藏/显示：hide(), show(), toggle()

淡入淡出：fadeIn(), fadeOut(), fadeToggle(), fadeTo()

滑动：slideUp(), slideDown(), slideToggle()

自定义动画：animate()

动画控制：stop(), delay(), finish()

jQuery animate() 方法用于创建自定义动画。

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

一、 隐藏/显示动画

方法： 

hide(speed, [easing], [callback])
show(speed, [easing], [callback])
toggle(speed, [easing], [callback])

示例： 

<!DOCTYPE html>
<html>
<head><style>#box {width: 200px;height: 100px;background-color: #f00;}</style><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head><body><button id="hideBtn">隐藏</button><button id="showBtn">显示</button><button id="toggleBtn">切换</button><div id="box"></div><script>$(document).ready(function() {$("#hideBtn").click(function() {$("#box").hide(1000); // 1秒内隐藏});$("#showBtn").click(function() {$("#box").show(1000); // 1秒内显示});$("#toggleBtn").click(function() {$("#box").toggle(1000); // 切换显示/隐藏});});</script>
</body>
</html>

二、淡入淡出动画

方法： 

fadeIn(speed, [easing], [callback])
fadeOut(speed, [easing], [callback])
fadeToggle(speed, [easing], [callback])
fadeTo(speed, opacity, [easing], [callback])

示例： 

<!DOCTYPE html>
<html>
<head><style>#fadeBox {width: 200px;height: 100px;background-color: #0f0;display: none; /* 初始隐藏 */}</style><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><button id="fadeInBtn">淡入</button><button id="fadeOutBtn">淡出</button><button id="fadeToggleBtn">切换</button><div id="fadeBox"></div><script>$(document).ready(function() {$("#fadeInBtn").click(function() {$("#fadeBox").fadeIn(1000); // 1秒内淡入});$("#fadeOutBtn").click(function() {$("#fadeBox").fadeOut(1000); // 1秒内淡出});$("#fadeToggleBtn").click(function() {$("#fadeBox").fadeToggle(1000); // 切换淡入/淡出});});</script>
</body>
</html>

三、 滑动动画

方法： 

slideUp(speed, [easing], [callback])
slideDown(speed, [easing], [callback])
slideToggle(speed, [easing], [callback])

示例： 

<!DOCTYPE html>
<html>
<head><style>#slideBox {width: 200px;height: 100px;background-color: #00f;display: none; /* 初始隐藏 */}</style><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><button id="slideDownBtn">滑动展开</button><button id="slideUpBtn">滑动收起</button><button id="slideToggleBtn">切换</button><div id="slideBox"></div><script>$(document).ready(function() {$("#slideDownBtn").click(function() {$("#slideBox").slideDown(1000); // 1秒内滑动展开});$("#slideUpBtn").click(function() {$("#slideBox").slideUp(1000); // 1秒内滑动收起});$("#slideToggleBtn").click(function() {$("#slideBox").slideToggle(1000); // 切换滑动展开/收起});});</script>
</body>
</html>

四、自定义动画（animate()）

方法： 

$(selector).animate({ properties }, [duration], [easing], [complete]);

示例： 

<!DOCTYPE html>
<html>
<head><style>#animateBox {width: 100px;height: 100px;background-color: #ff0;position: absolute; /* 必须设置非静态定位 */left: 0;}</style><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><button id="animateBtn">启动动画</button><div id="animateBox"></div><script>$(document).ready(function() {$("#animateBtn").click(function() {$("#animateBox").animate({  left: "500px", // 移动到右侧opacity: 0.5  // 透明度变化},2000,           // 动画持续时间（2秒）"linear",       // 缓动函数（匀速）function() {alert("动画完成！");});});});</script>
</body>
</html>

五、动画队列与延迟

方法： 

delay(time)：设置动画延迟。
stop([clearQueue], [jumpToEnd])：停止当前动画。

示例： 

<!DOCTYPE html>
<html>
<head><style>#queueBox {width: 100px;height: 100px;background-color: #f0f;position: absolute;left: 0;}</style><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><button id="queueBtn">启动队列动画</button><div id="queueBox"></div><script>$(document).ready(function() {$("#queueBtn").click(function() {$("#queueBox").animate({ left: "200px" }, 1000).delay(500) // 延迟500毫秒.animate({ left: "400px" }, 1000).stop(); // 停止后续动画});});</script>
</body>
</html>

注意事项

CSS 属性设置：

使用 position（如 relative、absolute）才能移动元素（如 left、top）。

隐藏元素时，确保初始状态正确（如 display: none）。

动画性能优化：

避免频繁触发动画（如 mouseover 事件）。

使用 stop() 防止动画堆积（如多次点击按钮导致动画叠加）。

缓动函数（easing）：

默认值为 "swing"（先慢后快），可使用 "linear"（匀速）或自定义缓动函数（需 jQuery UI 支持）。