jQuery 动画

建议学习时长： 30分钟
学习方式：了解

学习目标

• 知道淡入淡出和展开合拢的方式显示/隐藏元素的写法
• 知道动画的通用写法

详细介绍

淡入淡出的方式的显示/隐藏元素

$el.fadeIn() // 显示
$el.fadeOut() // 隐藏

展开合拢的方式显示/隐藏元素

$el.slideDown() // 显示
$el.slideUp() // 隐藏

通用动画

写法:

.animate( 属性 [, 持续事件 ] [, 缓动函数名 ] [, 动画完成后的回调 ] )

如

$el.animate({
  opacity: 0.6,
  left: '+=50',
  height: 'toggle'// 0 与 原高的切换
}, 2000, function(){
  // 动画完成
})

上面的的代码的意思是：元素以动画的方式经过 2 秒，透明度变成 0.6,向左移 50。