jQuery动画
显示与隐藏：show()、hide()
这两个方法可以实现无动画的显示与隐藏，也可以实现有动画版的显示与隐藏。在括号中加入参数即可。
有动画效果的显示：show(speed,[callback]);
有动画效果的隐藏：hide(speed,[callback]);
speed参数是动画的执行速度，默认的速度有：slow，normal，fast，也可以指定速度，默认单位毫秒。
show(),hide()方法实现p元素的文字点击消失，然后在显示，并设置文字颜色为红色
<script type="text/javascript">
$(function() {
$("p").click(function(){
$(this).hide("slow",function(){
$(this).show("slow",function(){
$("p").css("color","red");
});
});
});
});
</script>
<div class="wrapper">
<p>隐藏于显示动画</p>
</div>
toggle()方法
在使用show(),hide()方法实现动画时，通常要先判断元素的显示还是隐藏，这样就会使代码显得很长，为了解决这个问题，可以使用toggle方法，该方法是在显示和隐藏之间进行切换。
调用该方法有三种格式：
格式一：无参数，toggle();
格式二：逻辑参数调用格式，toggle(switch);switch是一个布尔值，switch为true时显示元素，为false时隐藏元素。
格式三：动画效果调用格式，toggle(speed,[callback]);
三种调用方式实现图片的显示与隐藏，其中第一种方式是单纯的图片显示与隐藏切换，没有动画。第二种方式设置参数值为false，点击之后隐藏图片。第三种方式，实现图片显示与隐藏的切换，但是在显示图片的时候，给图片添加一个一像素的实线黑色边框
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function(){
$("img").toggle();
});
$("input:eq(1)").click(function(){
$("img").toggle(false);
});
$("input:eq(2)").click(function(){
$("img").toggle(3000,function(){
$(this).css({"border":"1px #000 solid"});
});
});
});
</script>
<div class="wrapper">
<img src="http://xinxinjs.github.io/img_test/bt2.jpg" />
</div>
<input type="button" value="无参数" />
<input type="button" value="逻辑参数" />
<input type="button" value="动画效果" />
滑动动画
jQuery中提供了两个实现元素滑动的方法：slideDown和slideUp方法。
slideDown()语法格式：slideDown(speed,[callback]);其功能是以动画的效果，将所选元素的高度向下增大，使其呈现一种滑动的效果
slideUp()语法格式：slideUp(speed,[callback]);其功能是以动画的效果，将所选元素的高度向上缩小，使其呈现一种滑动的效果
slideUp方法实现图片向上滑动收起动画效果，并在图片收起之后弹出图片已经收起效果
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("input").click(function(){
$("img").slideUp(1000,function(){
alert("图片已经收起");
});
});
});
</script>
<div class="wrapper">
<img src="http://xinxinjs.github.io/img_test/bt2.jpg" />
</div>
<input type="button" value="点击向上滑动图片" />
slideToggle()方法
该方法可以在元素向下滑动和向上滑动之间进行切换。语法：slideToggle(speed,[callback]);
slideToggle()方法实现图片向上滑动和向下滑动的动画切换
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("input").click(function(){
$("img").slideToggle(1000,function(){
alert("图片滑动状态已经变化");
});
});
});
</script>
<div class="wrapper">
<img src="http://xinxinjs.github.io/img_test/bt2.jpg" />
</div>
<input type="button" value="点击滑动图片" />
淡入淡出
在jQuery中通过改变元素的透明度，来实现动画效果的方法：fadeIn和fadeOut方法
fadeIn语法：fadeIn(speed,[callback]);
fadeOut语法：fadeOut(speed,[callback]);
fadeOut方法实现图片淡出
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("input").click(function(){
$("img").fadeOut(2000,function(){
alert("图片淡出");
});
});
});
</script>
<div class="wrapper">
<img src="http://xinxinjs.github.io/img_test/st2.jpg" />
</div>
<input type="button" value="点击图片淡出" />
fadeTo方法
该方法可以以动画的形式改变元素的透明度到某一指定值。语法fadeTo(speed,opacity,[callback]);
对于该方法第一个参数和第三个参数就不用说明了，这里说明一下第二个参数opacity，这个参数值的范围是0-1，定义元素发生动画完成时的透明度值
使用fadeTo方法改变图片的透明度到指定值
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("input").click(function(){
$("img").fadeTo(2000,0.5,function(){
alert("图片淡出");
});
});
});
</script>
<div class="wrapper">
<img src="http://xinxinjs.github.io/img_test/st2.jpg" />
</div>
<input type="button" value="点击图片改变透明度" />
自定义动画
animate-简单的动画
调用语法：animate(params,[duration],[easing],[callback]);
其中参数params表示用于制作动画效果的属性样式和值的集合，duration表示三种默认的速度字符-slow、fast、normal，可选项easing为动画插件使用，用于控制动画的表现效果，通常有：linear和swing字符值。
自定义动画，点击开始按钮之后图片的宽度为页面的100%
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("input").click(function(){
$("img").animate({
width:100+"%"
},"slow","linear");
});
});
</script>
<h1>点击按钮执行自定义的动画</h1>
<div class="wrapper">
<img src="http://xinxinjs.github.io/img_test/st2.jpg" />
</div>
<input type="button" value="开始" />
如果为一个元素定义多个动画，这些动画会形成动画队列，依次执行。
动画停止stop
在jQuery中，提供stop()方法，停止正在执行的动画，其调用格式：stop([clearQueue],[gotoEnd]);
参数clearQueue是一个布尔值，表示是否停止正在执行的动画。参数gotoEnd也是一个布尔值，表示是否立即完成正在执行的动画
实现点击开始按钮开始动画，点击停止按钮立即停止动画
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function(){
$("img").animate({
width:100+"%"
},"slow","linear");
$("img").animate({
width:50+"%"
},"slow","linear");
$("img").animate({
width:100+"%"
},"slow","linear");
$("img").animate({
width:20+"%"
},"slow","linear");
});
$("input:eq(1)").click(function(){
$("img").stop(true,false);
});
});
</script>
<h3>点击开始按钮执行自定义的动画，点击停止按钮停止动画</h3>
<input type="button" value="开始" />
<input type="button" value="停止" />
<div class="wrapper">
<img src="http://xinxinjs.github.io/img_test/st2.jpg" />
</div>
动画延迟delay
语法：delay(duration,queueName);
参数duration为延迟的时间值，单位毫秒。queueName为动画队列名词，即动画队列。
