建议学习时长： 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。
