Jquery中的动画
Jquery中的任何动画效果都可以指定三种速度参数，即”slow“”normal“”fast“时间长度分别为0.6s 0.4s 0.2s 的那个是用速度关键字是需要加上引号。
4.2.1show（）方法 和hide（）方法
在文档里面，为一个元素调用hide（）方法，可以将该元素的display样式改为“none”
在Jquery中做动画要求在标准的模式下，否则可能会引起动画抖动，标准模式下即要求文件头部包括
DTD定义
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2show（）方法和hide（）方法让元素动起来
show（6000）//让动画在6000ms内显示完全
4.2.2 fadeIn() 淡入方法 和 fadeOut（） 淡出方法
只改变元素的不透明度。
fadeOut（）方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失（display：none）
4.2.3 slideUp（）方法 和slideDown（）方法
slideUp()方法和slideDown（）方法只会改变元素的高度。如果一个元素的display属性之为none，当调用slideDown时，这个元素将由上至下延伸显示。
4.2.4自定义动画方法animation（）
语法结构:animate（{params}，speed，callback）；
（1）params：一个包含样式属性及值的映射，比如{property1：”value“，property2：”value2“，。。。}
（2）speed：速度参数 可选
（3）callback ：在动画完成时执行函数，可选
1.自定义简单动画
2累加，累减动画
之前设置了{left：”500px“}作为参数，如果在500px之前加上”+=“或者”-=“符号即表示在当前位置上累加和累减
3多重动画
（1）同时执行多个动画
改变animation（）的参数个数
$(this).animate({left:"500px",height:"200px"},3000);（2）按照顺序执行多个动画$(this).animate({left:"500px"},3000);$(this).animate({height:"200px"},3000);拆开分别执行或者改写为链式手法$(this).animate({left:"500px"},3000)..animate({height:"200px"},3000);这样就形成了”动画队列“4综合动画可以通过链式效果对动画进行排队4.2.5动画回调函数css（）方法不会加入到动画队列中，而是立即执行，可以使用回调函数callback对非动画方法实现排队，只要把css方法写在最后一个动画的回调函数上面就可以执行。callback回调函数适应于Jquery所有的动画效果方法<style type="text/css"> #panel{ position: relative; width: 100px; height: 100px; border:1px solid red; background:#96E555; cursor: pointer; opacity: 0.5; } </style></head><body> <div id="panel"></div> <script> $(function () { $("#panel").click(function () { $(this).animate({left:"500px",height:"200px",opacity:"1"},3000) .animate({top:"200px",width:"200px"},3000,function () { $(this).css("border","5px solid blue"); }) }) }) </script></body>4.2.6停止动画和判断是否处于动画状态1.停止元素动画stop（）方法 语法结构：stop（[clearQueue][,gotoEnd]）；两个参数都是可选参数，为boolean值 clearQueue代表是否要清空未执行完的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态如果直接使用stop（）方法，则会立即停止当前正在执行的动画，如果接下来还有动画等持续进行，则以但前状态开始接下来的动画。组合动画
<script> $(function () { $("#panel").hover(function () { $(this).stop().animate({height:"150px",width:"300px"},2000).animate({width:"300"},300); },function () { $(this).stop().animate({height:"22px",width:"60px"},3000).animate({width:"60"},300); }) })</script>此时只用一个不带参数的stop方法就有些力不从心了，我们使用第一个参数可以实现：程序会吧当前元素接下来尚未执行完的动画队列都清空。第二个参数（goEnd）可以用于让正在执行的动画直接到达结束时刻的状态，通常用于后一个动画需要基于前一个动画的末状态的情况，可以通过stop（false，true）这种方式来让当前动画直接到达末状态。<script> $(function () { $("#panel").hover(function () { $(this).stop().animate({height:"150px",width:"300px"},2000).animate({width:"300"},300); },function () { $(this).stop().animate({height:"22px",width:"60px"},3000).animate({width:"60"},300); }) })</script>stop(true,true)即停止当前动画并直接到达当前动画的没状态，并清空动画队列。注意Jquery只能设置正在执行的动画的最终状态，而没有提供直接诶到达未执行动画队列最终状态的方法2判断元素是否处于动画状态当用户快速在某个元素是哪个执行animate（）动画时，就会出现动画累积，解决办法是判断元素是否正处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。if（！$(element).is(":animated")）{//如果当前没有，则添加新的动画；}4.2.7其他动画方法 三种专门用于交互的动画方法toggle（speed，【callback】）；slideToggle（speed，[callback]）；fadeTo（speed，opacity，【callback】）；1.toggle（）方法可以切换元素的可见状态。如果元素是可见的，则切换为隐藏的，如果元素是隐藏的，则切换为可见的；<div id="panel">标题</div><h5 class="content">asdjflasdf</h5><script> $(function () { $("#panel").click(function () { $(this).next("h5.content").toggle(); }); })</script>2 slideToggle()方法通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度。3.fadeTo（）方法可以把元素的不透明度以渐进的方式调整到指定的值，只调整不透明度fadeTo（400,0.6）//速度是400ms 透明度为0.6动画队列：一组元素上面的动画效果（1）一组元素上的动画效果当在一个animate（）方法中应用多个属性是，动画是同时发生的当以链式 的写法应用动画方法时，动画是按照顺序发生的。（2）多组元素上的动画默认情况下，动画是同时发生的当以回调方式应用动画时，动画是按照回调顺序发生的，另外，在动画方法中，要注意其他非动画方法会插队，可以讲这些方法写在回调函数中