jquery效果
jQuery 动画效果
jQuery 提供了多种内置动画效果，可用于实现平滑的页面交互。常用的方法包括 show()、hide()、toggle()、fadeIn()、fadeOut()、slideUp() 和 slideDown()。
// 显示元素
$("#element").show(500); // 500ms 动画时间
// 隐藏元素
$("#element").hide("slow"); // 慢速动画
// 切换显示/隐藏
$("#element").toggle();
// 淡入淡出效果
$("#element").fadeIn();
$("#element").fadeOut();
// 滑动效果
$("#element").slideUp();
$("#element").slideDown();自定义动画
通过 animate() 方法可以实现自定义动画，支持 CSS 属性的渐变效果。
$("#element").animate({
opacity: 0.5,
left: "+=50px",
height: "toggle"
}, 1000); // 动画持续 1 秒动画队列控制
jQuery 动画默认加入队列依次执行，可通过 stop() 或 finish() 控制动画行为。
// 停止当前动画
$("#element").stop();
// 立即完成所有动画
$("#element").finish();
// 链式动画
$("#element")
.slideDown(500)
.delay(1000)
.fadeOut(500);回调函数
动画完成后可触发回调函数，适用于需要同步执行的场景。
$("#element").fadeOut(500, function() {
console.log("动画完成");
$(this).remove();
});缓动效果
jQuery UI 扩展了缓动函数（easing），支持更丰富的动画曲线。
$("#element").animate({
left: 500
}, {
duration: 1000,
easing: "easeOutBounce"
});事件触发动画
结合事件绑定实现交互式动画效果。
$("#button").click(function() {
$("#box").animate({width: "300px"}, 800);
});注意事项
- 避免过度使用动画影响性能
- 移动端优先考虑 CSS3 动画
- 新版 jQuery 已移除部分特效方法（如
$.browser），需注意兼容性
