对于页面上的动画特效 jQuery 也能轻松搞定。jQuery 动画的机制和操作 DOM 的机制相同，也是用选择器和筛选函数找出要应用动画的元素，再对它们定义和播放动画。
jQuery 常用动画和特效函数：
slideDown(time, cb) 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。time 动画时间，毫秒为单位slideUp(time, cb) 通过高度变化（向上减小）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。time 动画时间，毫秒为单位
slideToggle(time, cb) 开关 slide 变化
fadeIn(time, cb) 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
fadeOut(time, cb) 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
fadeTo(time, opacity, cb) 将不透明度在一定时间内调整到特定值，并在动画完成后可选地触发一个回调函数。
fadeToggle(time, cb) 开关 fade 变化
animate(pars, time, cb) 自定义动画函数，在指定时间内将元素的样式变到 pars 指定的值，
这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left。
在动画完成后可选地触发一个回调函数 cb。
delay(time, cb) 在对象的动画队列中插入一段延迟，并在延迟完成后可选地触发一个回调函数。
以上动画函数都能通过链式操作串联起来，实现一个动画结束后再开始另一个动画的效果。
另外还有两个结束动画的函数：
stop(clearQueue, gotoEnd) 结束对象动画队列中的动画。
finish() 让对象动画队列中的动画立即完成。
更多 jQuery 动画特效函数请参考API http://jquery.cuishifeng.cn/slideDown.html
代码示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../lib/jquery-1.11.2/jquery.js"></script>
<style>
.wrap {height: 40px; position: relative;}
.wrap div {position: absolute;}
</style>
</head>
<body>
<div class="wrap"><div id="div">Hello World!</div></div>
<div class="wrap"><div id="div2">Hello World!</div></div>
<div class="wrap"><div id="div3">Hello World!</div></div>
<div class="wrap"><div id="div4">Hello World!</div></div>
<script>
// 2秒 淡出对象
$('#div').fadeOut(2000);
// 2秒 收起对象，收起后打印一段文字
$('#div2').slideUp(2000, function() {console.log('hello world!'); });
// 右移动对象，左移对象，淡出对象
$('#div3').animate({left: '200px'}, 1000).delay(1000).animate({left: 0}, 1000).fadeOut(1000);
// 右移对象，左移对象，如此往复
(function() {
$('#div4').animate({left: '200px'}, 1000).animate({left: 0}, 1000, arguments.callee);
})();
</script>
</body>
</html>
86
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
