Jquery动画效果

目录

• 基础动画方法
• 自定义动画: animate()
• 停止动画:stop()
• 链式动画
• 动画队列与queue()
• 动画队列管理
• 自定义Easing函数
• Hardware Acceleration
• 动画的链式调用与组合
• 性能考虑

---

jQuery 提供了一套简单而强大的动画API，使得开发者能够轻松地为网页添加平滑的动态效果。

1. 基础动画方法

fadeIn() / fadeOut()

• fadeIn(duration, [complete]) 使匹配的元素逐渐变得可见。
• fadeOut(duration, [complete]) 使匹配的元素逐渐变得不可见。

$("#myDiv").fadeIn(1000, function(){
  // 动画完成后执行的函数
});
$("#myDiv").fadeOut(500);

slideUp() / slideDown()

• slideUp(duration, [complete]) 使匹配的元素向上滑动隐藏。
• slideDown(duration, [complete]) 使匹配的元素向下滑动显示。

$("#myDiv").slideUp(1000);
$("#myDiv").slideDown(500, function(){
  // 动画完成后的回调
});

slideToggle()

slideToggle(duration, [complete]) 切换匹配元素的滑动显示/隐藏状态。

$("#myDiv").slideToggle(400);

2. 自定义动画: animate()

• animate(properties, duration, [easing], [complete]) 用于创建自定义动画效果。

$("#myDiv").animate({
  left: "+=50px",
  opacity: 0.5
}, 1000, function(){
  // 动画完成后执行
});

其中，properties是一个对象，包含了要更改的CSS属性和它们的目标值；duration是动画持续时间（毫秒）；easing是动画速度曲线，默认为swing，也可以是linear 或其他自定义函数；complete是动画完成后执行的函数。

3. 停止动画: stop()

• stop([clearQueue], [jumpToEnd]) 停止所有在指定元素上正在运行的动画。

$("#myDiv").stop(true, true); // 停止动画并清除队列，直接跳到最终状态

• clearQueue参数决定是否清空动画队列，默认为false。
• jumpToEnd参数决定是否立即完成当前动画，默认为false。

4. 链式动画

jQuery支持链式调用，可以在一个元素上连续执行多个动画效果。

$("#myDiv")
  .fadeIn(500)
  .delay(1000) // 在动画队列中插入延迟
  .slideUp(1000)
  .animate({height: 'toggle'}, 500);

5. 动画队列与queue()

• queue() 返回一个元素的动画队列。
• queue(callback) 将一个函数添加到队列的末尾。
• dequeue() 执行队列中的下一个函数。

// 示例：手动控制动画队列
var $div = $("#myDiv");
$div.queue(function(next){
  $(this).fadeIn(500);
  next(); // 执行队列中的下一个函数
}).queue(function(next){
  $(this).slideUp(500);
  next();
});

6. 动画队列管理

除了基本的动画方法外，jQuery还提供了队列管理函数，让你能够更精细地控制动画序列。

clearQueue()

• clearQueue([queueName]) 清除匹配元素上指定队列的所有项。默认清除fx动画队列。

$("#myDiv").stop(true).clearQueue(); // 停止并清除所有动画

queue(queueName, newQueue)

• queue(queueName, newQueue) 替换匹配元素的指定队列内容。这可以用来完全重写动画序列。

$("#myDiv").queue("fx", function(next){
  $(this).fadeIn(500, next);
  $(this).slideUp(500, next);
});

dequeue(queueName)

• dequeue([queueName]) 执行队列中的下一个函数。如果没有指定队列名称，默认执行fx动画队列。

$("#myDiv").dequeue(); // 执行动画队列中的下一个动画

7. 自定义Easing函数

jQuery UI扩展了动画库，引入了更多预设的easing函数，比如easeInOutBack, easeInOutCirc等。你还可以定义自己的easing函数：

$.easing.myEasing = function (x, t, b, c, d) {
  return c*(t/=d)*t*t + b;
};

$("#myDiv").animate({left: '100px'}, {
  duration: 1000,
  easing: 'myEasing'
});

8. Hardware Acceleration

为了提高动画性能，特别是在移动设备上，可以利用硬件加速。尽管jQuery自身不直接提供硬件加速的API，但可以通过CSS来间接实现，比如在动画开始前应用transform: translateZ(0)：

$("#myDiv").css("transform", "translateZ(0)").animate({left: '100px'});

9. 动画的链式调用与组合

jQuery的动画方法支持链式调用，可以方便地组合多个动画效果，形成复杂的动画序列。同时，使用queue()和自定义函数，可以创建高度定制化的动画流程。

10. 性能考虑

• 减少重排和重绘：尽量减少在动画过程中对DOM结构的改变，因为这会导致页面重新布局和绘制，消耗性能。
• 使用requestAnimationFrame：虽然不是jQuery直接提供的，但在自定义动画逻辑中使用requestAnimationFrame而非setTimeout或setInterval可以更好地利用硬件优化，提高动画流畅度。
• 动画优化：合理使用stop()和clearQueue()避免不必要的动画积累，保持动画队列的清爽。