jquery的动画

jQuery 动画基础

jQuery 提供了一系列动画方法，用于实现元素的动态效果，包括显示/隐藏、淡入淡出、滑动和自定义动画。

显示与隐藏动画

• show() 和 hide() 控制元素的显示与隐藏，可添加速度参数（如 "slow"、"fast" 或毫秒值）：

  $("#element").hide(1000); // 1秒内隐藏
  $("#element").show("fast"); // 快速显示

淡入淡出效果

• fadeIn() 和 fadeOut() 实现淡入淡出效果，支持速度参数和回调函数：

  $("#element").fadeIn(500); // 0.5秒淡入
  $("#element").fadeOut("slow", function() {
    console.log("动画完成");
  });

滑动效果

• slideUp() 和 slideDown() 通过高度变化实现滑动效果：

  $("#element").slideDown(800); // 0.8秒下滑展开
  $("#element").slideUp(200); // 快速上滑收起

自定义动画

animate() 方法允许自定义 CSS 属性的动画，支持链式调用和回调：

$("#box").animate(
  { width: "200px", opacity: 0.5 }, // 目标属性
  1000, // 持续时间
  function() { alert("动画结束"); }
);

动画控制

• stop() 停止当前动画：

  $("#element").stop(); // 立即停止
  $("#element").stop(true, true); // 清除队列并跳到最终状态

• delay() 延迟动画执行：

  $("#element").delay(500).fadeOut(); // 延迟0.5秒后淡出

注意事项

• 避免过度使用动画影响性能，尤其在移动设备上。
• 优先使用 CSS3 动画（如 transition）实现简单效果，性能更优。
• 回调函数可用于动画完成后执行其他操作。

通过组合这些方法，可以灵活实现复杂的动态交互效果。