《锋利的jQuery》第四章（二）
1、show() 方法，里面可以设置元素显示的速度，可以是show("fast") , show("slow") , show(1000) 。
2、hide() 方法，里面也可以设置元素显示的速度，可以是hide("fast") , hide("slow") , hide(1000)。
3、 fadeIn() 和 fadeOut() 方法，改变元素的不透明度。fadeOut() 会在指定的时间内降低元素的不透明度，直至元素完全消失(“display：none”)。fadeIn()则恰好相反。
4、slideUp() 和 slideDown() 方法只会改变元素的高度。
5、自定义动画方法：
animate(params , speed , callback);
（1）params ：一个包含样式属性和值的映射，比如 {property1 : "value1" , property2 : "value2" , ...}。
（2）speed：速度参数，可选。
（3）callback：在动画完成时执行的函数，可选。
<script type="text/javascript"> $(function(){ $("#panel").click(function(){ $(this).animate({left:"500px"} , 3000); }) }) </script> <style type="text/css"> #panel{ position: relative; width:100px; height:100px; border:1px solid #0050d0; background-color: #96e555; cursor: pointer; } </style> </head> <body> <div id="panel"></div> </body>
效果：点击后让方块在3秒内移到距页面左边500px处。
<script type="text/javascript"> $(function(){ $("#panel").click(function(){ $(this).animate({left:"+=500px"} , 3000); }) }) </script>
将属性值写为标红字后，指相对于当前的位置向右移动500px。
6、多重动画：
<script type="text/javascript"> $(function(){ $("#panel").click(function(){ $(this).animate({left:"500px",height:"200px"} , 3000); }) }) </script>
效果：向右移动500px的同时，高度变为200px，二者同时发生。
7、按顺序执行多个动画：
<script type="text/javascript"> $(function(){ $("#panel").click(function(){ $(this).animate({left:"500px"},3000); $(this).animate({height:"200px"},3000); }) }) </script>
效果：先向右移动500px，再将高度变为200px，按顺序执行。
8、停止元素的动画,如果在某处需要停止动画，需要使用stop()方法：
stop([clearQueue] [, gotoEnd]);
两个参数都是可选的，为Boolean(true或false)。 clearQueue 代表是否要清空未执行完的动画队列，gotoEnd代表是否直接将正在执行的动画跳到末状态。
<script type="text/javascript"> $(function(){ $("#panel").hover(function(){ $(this).stop() .animate({height:"150px",width:"300px"},200); },function(){ $(this).stop() .animate({height:"22px",width:"60px"},300); }); }) </script>
当有连贯动画时，stop()的第一个参数就发挥了作用。因为如果不清除后面未执行的动作，触发鼠标光标后，只会停止当前的动画，并继续执行下面的animate() ， 光标移除事件要等animate()动作完成之后才执行，就会出现光标移入移除与动画不匹配的情况。
8、要避免动画累积而导致的动画与用户的行为不一致，在添加动画前需要判断元素是否处于动画状态。
if(!$(element).is(":animate")){}
9、jQuery中3个专门用于交互的动画方法
（1）toggle(speed , [callback]) 可以切换元素的可见状态
（2）slideToggle(speed , [callback]) 通过高度变化来切换匹配元素的可见性
（3）fadeTo(speed , opacity , [callback]) 可以把元素的不透明度以渐进的方式调整到指定的值。
