jQuery 动画效果 – BuildCodePro

jQuery动画效果知识汇总

编程小白也能理解的动画效果详解

jQuery Animation Effects

基本显示/隐藏动画

这些是最基本的动画效果，用于显示或隐藏元素。

show() 和 hide()

show() 让隐藏的元素显示出来（带动画效果）

hide() 让显示的元素隐藏起来（带动画效果）

可以指定动画持续时间（如：”slow”、”fast” 或毫秒数）

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

toggle()

根据元素当前状态切换显示/隐藏：如果元素是显示的，就隐藏它；如果是隐藏的，就显示它。

$(‘#element’).toggle(800); // 在0.8秒内切换状态

Box 1

淡入淡出效果

这些方法通过改变元素的不透明度（透明度）来实现动画效果。

fadeIn() 和 fadeOut()

fadeIn()：让隐藏的元素逐渐显示（淡入）

fadeOut()：让显示的元素逐渐隐藏（淡出）

$(‘#element’).fadeIn(‘slow’); // 慢慢淡入
$(‘#element’).fadeOut(2000); // 2秒内淡出

fadeToggle()

根据元素当前状态切换淡入/淡出效果

$(‘#element’).fadeToggle(); // 自动切换淡入/淡出

fadeTo()

将元素的不透明度调整到指定值（0-1之间）

0 完全透明，1 完全不透明

$(‘#element’).fadeTo(‘slow’, 0.5); // 半透明

Box 2

滑动效果

这些方法通过改变元素的高度来实现动画效果，常用于下拉菜单、手风琴等组件。

slideDown() 和 slideUp()

slideDown()：让隐藏的元素向下滑动显示

slideUp()：让显示的元素向上滑动隐藏

$(‘#element’).slideDown(); // 向下滑出
$(‘#element’).slideUp(‘fast’); // 快速向上收起

slideToggle()

根据元素当前状态切换上下滑动效果

$(‘#element’).slideToggle(1000); // 1秒内切换滑动

注意：滑动效果改变的是元素的高度，所以元素需要有高度变化空间。

Box 3

自定义动画

animate() 方法允许你创建自定义动画，几乎可以改变任何CSS属性。

animate() 基本用法

你可以指定要改变的CSS属性、动画时长和缓动效果

$(‘#element’).animate({
  width: ‘300px’,
  height: ‘300px’,
  opacity: 0.5
}, 1500);

相对值动画

可以使用相对值（+=/-=）来指定相对于当前值的动画

$(‘#element’).animate({
left: ‘+=100px’, // 向右移动100px
top: ‘-=50px’ // 向上移动50px
}, 1000);

队列动画

jQuery会自动将多个animate()调用加入队列，按顺序执行

$(‘#element’)
  .animate({width: ‘300px’}, 1000)
  .animate({height: ‘300px’}, 1000)
  .animate({opacity: 0.5}, 1000);

Box 4

动画高级控制

这些方法提供了对动画更精细的控制。

回调函数

可以在动画完成后执行特定的函数

$(‘#element’).hide(1000, function() {
alert(‘动画完成！’);
});

stop()

停止当前正在运行的动画

$(‘#element’).stop(); // 立即停止当前动画

delay()

在动画队列中设置延迟

$(‘#element’)
  .slideUp(300)
  .delay(1000) // 延迟1秒
  .slideDown(300);

finish()

立即完成所有排队中的动画

$(‘#element’).finish(); // 立即完成所有动画

提示：合理使用回调函数可以让动画序列更加可控和流畅。

缓动效果

缓动函数决定了动画的变化速率，jQuery内置了两种缓动效果：

linear（线性）

匀速运动，从头到尾速度一致

$(‘#element’).animate({left: ‘200px’}, 1000, ‘linear’);

swing（默认）

动画开始和结束时较慢，中间较快

更加自然，类似于真实物体的运动

$(‘#element’).animate({left: ‘200px’}, 1000, ‘swing’);

扩展：通过jQuery UI可以使用更多缓动函数，如easeInOutBack、easeInBounce等。

Box 5

动画效果综合演示

尝试下面的按钮查看不同动画效果

动画预览