动画效果(一)
在以前很长一段时间里，网页上的各种特效还需要采用flash在进行。但最近几年里，我们已经很少看到这种情况了，绝大部分已经使用JavaScript动画效果来取代flash。这里
说的取代是网页特效部分，而不是动画。网页特效比如：渐变菜单、渐进显示、图片轮播等；而动画比如：故事情节广告、MV等等。
显示、隐藏
jQuery中显示方法为：.show()，隐藏方法为：.hide()。在无参数的时候，只是硬性的显示内容和隐藏内容。
html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动画效果</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <input type="button" class="show" value="显示" /> <input type="button" class="hide" value="隐藏" /> <input type="button" class="toggle" value="切换" /> <div id="box"> box </div> <!-- <span id="box"> box </span> --> </body> </html>
style.css：
#box { width: 100px; height: 100px; background: red; }
jQuery代码如下：
$(".show").click(function() { //显示
$("#box").show();
});
$(".hide").click(function() { //隐藏
$("#box").hide();
});
注意：.hide()方法其实就是在行内设置CSS代码：display:none; 而.show()方法要根据原来元素是区块还是内联来决定，如果是区块，则设置CSS代码：display:block; 如果是内联，则设置CSS代码：display:inline;。
在.show()和.hide()方法可以传递一个参数，这个参数以毫秒(1000毫秒等于1秒钟)来控制速度，并且里面富含了匀速变大变小，以及透明度变换。
$(".show").click(function() {
$("#box").show(1000); //显示用了1秒
});
$(".hide").click(function() {
$("#box").hide(1000); //隐藏用了1秒
});
除了直接使用毫秒来控制速度外，jQuery还提供了三种预设速度参数字符串：slow、normal和fast，分别对应600毫秒、400毫秒和200毫秒。
$(".show").click(function() {
$("#box").show("slow"); //600毫秒
});
$(".hide").click(function() {
$("#box").hide("slow"); //600毫秒
});
$(".show").click(function() {
$("#box").show("normal"); //默认400毫秒
});
$(".hide").click(function() {
$("#box").hide("normal"); //默认400毫秒
});
$(".show").click(function() {
$("#box").show("fast"); //200毫秒
});
$(".hide").click(function() {
$("#box").hide("fast"); //200毫秒
});
注意： 不管是传递毫秒数还是传递预设字符串，如果不小心传递错误或者传递空字符串，那么它将采用默认值：400毫秒。
$(".show").click(function() {
$("#box").show(""); //默认是400毫秒
});
$(".hide").click(function() {
$("#box").hide("");
});
.show()和.hide()可以传递两个参数，一个是速度，第二个是回调函数。即：
$(".show").click(function() {
$("#box").show("slow", function() {
alert("显示完毕");
});
});
$(".hide").click(function() {
$("#box").hide("slow");
});
再看如下html代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动画效果</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="test">你</div> <div class="test">好</div> <div class="test">吗</div> <div class="test">？</div> <input type="button" class="show" value="显示" /> <input type="button" class="hide" value="隐藏" /> <input type="button" class="toggle" value="切换" /> </body> </html>
style.css：
.test { padding: 5px; margin-left: 5px; background: orange; float: left; display: none; }
同步动画，四个区块同时显示出来：
$(".show").click(function() {
$(".test").show("slow");
});
列队动画：
$(".show").click(function() {
$(".test").eq(0).show("fast",function() {
$(".test").eq(1).show("fast",function() {
$(".test").eq(2).show("fast",function() {
$(".test").eq(3).show("fast");
});
});
});
});
列队动画，递归自调用：
$(".show").click(function() {
$(".test").first().show("fast", function testShow() {
$(this).next().show("fast", testShow); //this代表$(".test").first()对象
});
});
$(".hide").click(function() {
$(".test").last().hide("fast", function testShow() {
$(this).prev().hide("fast", testShow); //this代表$(".test").first()对象
});
});
我们在使用.show()和.hide()的时候，如果需要一个按钮切换操作，需要进行一些条件判断，而jQuery提供给我们一个类似功能的独立方法：.toggle()。
html(部分)代码：
<input type="button" class="show" value="显示" /> <input type="button" class="hide" value="隐藏" /> <input type="button" class="toggle" value="切换" /> <div id="box"> box </div>
style.css：
#box { width: 100px; height: 100px; background: red; }
同时实现显示与隐藏的功能：
$(".toggle").click(function() {
$("#box").toggle("slow"); //显示与隐藏
});
滑动、卷动
jQuery提供了一组改变元素高度的方法：.slideUp()、.slideDown()和.slideToggle()。顾名思义，向上收缩(卷动)和向下展开(滑动)。
html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动画效果</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <input type="button" class="up" value="上" /> <input type="button" class="down" value="下" /> <input type="button" class="toggle" value="切换" /> <div id="box"> box </div> </body> </html>
style.css：
#box { width: 100px; height: 100px; background: red; }
jQuery代码：
$(".up").click(function() {
$("#box").slideUp("slow");
});
$(".down").click(function() {
$("#box").slideDown("slow");
});
$(".toggle").click(function() {
$("#box").slideToggle("slow");
});
注意：滑动、卷动效果和显示、隐藏效果一样，具有相同的参数。
淡入、淡出
jQuery提供了一组专门用于透明度变化的方法：.fadeIn()和.fadeOut()，分别表示淡入、淡出，当然还有一个自动切换的方法：.fadeToggle()。
html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动画效果</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <input type="button" class="in" value="淡入" /> <input type="button" class="out" value="淡出" /> <input type="button" class="toggle" value="切换" /> <input type="button" class="to" value="透明度到" /> <div id="box"> box </div> </body> </html>
style.css代码同上。
jQuery代码：
$(".out").click(function() {
$("#box").fadeOut("slow");
});
$(".in").click(function() {
$("#box").fadeIn("slow");
});
$(".toggle").click(function() {
$("#box").fadeToggle("slow");
});
上面三个透明度方法只能是从0到100，或者从100到0，如果我们想设置指定值就没有办法了，而jQuery为了解决这个问题提供了.fadeTo()方法。
$(".to").click(function() {
$("#box").fadeTo("slow",0.33); //0-1之间，0.33表示值为33
});
注意：淡入、淡出效果和显示、隐藏效果一样，具有相同的参数。对于.fadeTo()方法，如果本身透明度大于指定值，会淡出，否则相反。