标签：
动画效果是jquery库比较吸引人的地方，通过jquery中的动画方法，能够轻松的为网页添加非常精彩的视觉效果，给用户一种全新的体验。
1、show()方法和hide()方法。
在html文档里，为一个元素调用hide()方法，会将元素的display样式设为"none";比如
$("element").hide(); 以上代码功能与css()方法设置display属性效果相同; $("element").css("display","none");
接下来，可以用show()方法将元素的display样式设置为先前的显示状态("block"或"inline"或其他除了"none"之外的值);
$("element").show();
hide()方法在将内容的display属性设置为"none"之前，会记住原先的值，当调用show()方法时，会复原。
2、show()方法和hide()方法让元素动起来。
这俩个方法在不加任何参数时，相当于css("display","none/block/inline/..."),作用是立即隐藏或显示，不会有任何动画。我们可以为其指定一个速度参数。参数有slow(600毫秒)、normal(400毫秒)、fast(200毫秒)、或者是一个数字，单位是毫秒，以下让一个元素在1s内显示:
1 $("element").show(1000); // 1000毫秒显示 2 3 $("element").hide("slow"); // 不是数字参数要加双引号
3、fadeIn()方法和fadeOut()方法。
与上述俩方法不同，这里只改变元素的不透明度，fadeOut()方法会在指定的时间内，降低元素的透明度，直到完全消失（display:none）;fadeIn()则相反。
4、slideDown()和slideUp()。
这俩个方法只会改变元素的高度，如果一个元素的display属性值为"none",当调用slideDown()方法时，这个元素将由上自下延伸显示;slideUp()方法则相反，由下自上缩短隐藏。
5、自定义方法animate()方法。
很多情况下，以上动画方法，无法满足用户的各种需求，那么就需要对动画有更多的控制，需要采取一些高级的自定义动画来解决这些问题，在jquery中，可以采用animate()来自定义动画。语法为：
1 animate(params,speed,callback);
参数说明:
(5.1.1)、params:一个包含样式属性及值的映射，比如{property1:"value1",property2:"value2",...};
(5.1.2)、speed:速度参数，可选。
(5.1.3)、callback:在动画完成时执行的函数，可选。
简单的例子:
1 #panel{ 2 position:relative; 3 width:100px; 4 height:100px; 5 border:#000 solid 1px; 6 background:yellowgreen; 7 cursor:pointer; 8 } 9 // 为了能让它动起来，更改它的"left"样式属性。代码如下： 10 $("#panel").click(function(){ 11 $(this).animate({left:"500px"},3000); 12 });
这段代码中，首先为id为"panel"的元素创建一个单击事件，然后为元素加入animate()方法，使元素向右移动500px，3秒内。
(5.2)、累加累减动画。
在之前的代码中，设置了({left:"500px"})作为参数，如果在500px之前加上"+="或者"-=",即表示在当前位置累加或者累减。代码如下:
$("#panel").click(function(){
$(this).animate({left:"+=500px"},3000); //在当前位置累加500px
});
(5.3.1)、多重动画。
同时执行多个动画。在上面的例子中，通过控制属性"left"的值实现了动画的效果，这是一个很单一的动画，如果需要同时执行多个动画，例如元素在向右滑动的同时，放大元素元素的高度，可以：
$("#panle").click(function(){
$(this).animate({left:"+=500px",height:"200px"},3000);
});
(5.3.2)、按顺序执行多个动画。
上例中，俩个动画效果是同时发生的，({left:"+=500px",height:"200px"}),如果想要按顺序执行动画，例如先让div元素向右滑动，完毕后再放大其高度，只需把代码拆开，按顺序书写就可以了，jquery支持链式编写：
$(this).animate({left:"+=500px"},3000).animate({height:"200px"},3000);
(5.3.4)、综合动画。
接下来要完成更复杂的动画，单击div元素后让他向右移动的同时增加他的高度，并将他的透明度从50%增加到100%；然后再让他从上到下移动，同时他的宽度变大，当完成这些效果后，让他以淡出的方式隐藏。代码如下：
1 $(function(){ 2 $("panel").css("opacity",0.5); //设置不透明度50% 3 $("panel").click(function(){
$(this).animate({left:"+=200px",height:"+=200px",opacity:1},2000)
.animate({top:"+=200px",width:"+=200px"},2000)
.fadeOut("slow"); 4 }); 5 });
(5.3.5)、动画回调函数。
在上例中，如果想切换元素的css样式，而不是隐藏元素：
css("border","#000 solid 1px");
如果按照常规的方式，将fadeOut("slow")改为css("border","#000 solid 1px");是不能得到预期结果，预期的效果是在动画的最后一步改变元素的样式，而实际的效果是，刚开始执行动画的时候，css()方法就被执行了，出现这个问题的原因是css()方法并不会加入到动画队列中，而是立即执行，可以使用回调函数(callback)对非动画方法实现排队，只要把css方法写在最后一个动画的回调函数里即可，代码如下：
1 $(function(){ 2 2 $("panel").css("opacity",0.5); //设置不透明度50% 3 3 $("panel").click(function(){ 4 $(this).animate({left:"+=200px",height:"+=200px",opacity:1},2000) 5 .animate({top:"+=200px",width:"+=200px"},2000,function(){ 6 $(this).css("border","#000 solid 1px"); 7 }); 8 4 }); 9 5 });
这样一来，css()方法就加入到动画队列中了，从而满足了上文提出的要求。注意，callback回调函数适用于jquery所有的动画效果方法，例如slideDown()方法的回调函数：
$("element").slideDown("normal",function(){
//在效果完成之后做其他的事情
})
(5.3.6)、停止动画。
很多时候需要停止匹配元素正在进行的动画，例如上例的动画，如果需要在某处停止动画，需要使用stop()方法，语法结构为：
stop([clearQueue][, gotoEnd]);
参数clearQueue,gotoEnd都是可选的参数，为布尔值(true/false);clearQueue代表是否要清空未执行完的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态。
如果直接使用stop()方法，即会立即停止当前正在进行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画，经常会遇到这种情况，在为一个元素绑定hover事件之后，用户把光标移入元素时会触发动画效果，而当这个动画还没结束时，用户就将光标移出这个元素了，那么光标移出的动画效果将会被放进队列之中，等待光标移入的动画结束后再执行，因此如果光标移入移出的速度过快就会导致动画效果与光标的动作不一致，此时只要在光标的移入，移出动画之前加入stop()方法，就能解决这个问题，stop()方法会结束当前正在进行的动画，并立即执行队列中的下一个动画，代码说明：
1 $("panel").hover(function(){ 2 $(this).stop().animate({width:"200px",height:"200px"},2000); 3 },function(){ 4 $(this).stop().animate({width:"100px",height:"100px"},2000); 5 });
标签：
原文地址：http://www.cnblogs.com/xlj-code/p/5732583.html
