jQuery之动画效果
通过一段代码来展示jQuery的动画效果。
1.show&hide
<script type="text/javascript"> $(function(){ $("#panel h5.head").toggle(function(){ $(this).next().hide(); },function(){ $(this).next().show(); }) }) </script>
html代码部分：
<body> <div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。 </div> </div> </body>
toggle()
用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
2.show&hide带时间，可以加入一个时间参数
<script type="text/javascript"> $(function(){ $("#panel h5.head").toggle(function(){ $(this).next().hide(600); },function(){ $(this).next().show(600); }) }) </script>
3.fadeOut&fadeIn 注意大小写，javascript是区分大小写的。
fadeOut()通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
fadeIn()通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
<script type="text/javascript"> $(function(){ $("#panel h5.head").toggle(function(){ $(this).next().fadeOut(); },function(){ $(this).next().fadeIn(); }) }) </script>
4.slideUp&slideDown
slideUp()通过高度变化（向上减小）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
slideDown()通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
<script type="text/javascript"> $(function(){ $("#panel h5.head").toggle(function(){ $(this).next().slideUp(); },function(){ $(this).next().slideDown(); }) }) </script>
5.animate简单应用
<script type="text/javascript"> $(function(){ $("#panel").click(function(){ //css中div必须设置为position:relative。才有效果。 $(this).animate({left: "500px"}, 3000); }) }) </script>
点击panel，会向右移动500px，时间为3秒钟。这其实是动态的调整它的位置。这要结合css来实现。因为只有position设为了relative，left属性才会有效。
6.animate多重动画
<script type="text/javascript"> $(function(){ $("#panel").click(function(){ $(this).animate({left: "500px",height:"200px"}, 3000); }) }) </script>
这段代码的意思，是使panel向右移动的同时，高度变为200px。这里用了两个参数。
<script type="text/javascript"> $(function(){ $("#panel").click(function(){ $(this).animate({left: "500px"}, 3000) .animate({height: "200px"}, 3000); }) }) </script>
这段代码与上面有所不同，它不是同时变化的，它是由先后顺序的，先是panel向右移动500px，然后高度变为200px。
<script type="text/javascript"> $(function(){ $("#panel").css("opacity", "0.5");//设置透明度 $("#panel").click(function(){ $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000) .animate({top: "200px" , width :"200px"}, 3000 ) .fadeOut("slow"); }); }); </script>
这段代码更为复杂一点。先是通过css方法设置panel的透明度为0.5，也就是半透明。然后是先让panel向右移动400px，高度变为200px，透明度变为1，也就是不透明。然后再向下移动200px，宽度变为200px，最后慢慢的淡出。fadeOut("slow")就是淡出的意思。这里的参数可以是数字表时间，也可以是字符串‘slow’，‘fast’表快慢。
<script type="text/javascript"> $(function(){ $("#panel").css("opacity", "0.5");//设置不透明度 $("#panel").click(function(){ $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000) .animate({top: "200px" , width :"200px"}, 3000 ) .css("border","5px solid blue"); }); }); </script>
这段代码最后有一段css效果。它并不是最后执行的。也就是它并没有排队，从一开始就是border为5px solid blue的效果。可以调整代码如下：
<script type="text/javascript"> $(function(){ $("#panel").css("opacity", "0.5");//设置不透明度 $("#panel").click(function(){ $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000) .animate({top: "200px" , width :"200px"}, 3000 ,function(){ $(this).css("border","5px solid blue"); }) }); }); </script>
animate(params,[speed],[easing],[fn])。animate最后一个参数是一个函数，它表示等动画执行完毕执行的动作。在这个函数中，设置css就可以实现css的最后执行。
7.stop
stop() 方法停止当前正在运行的动画。
<script type="text/javascript"> $(function(){ $("#panel").hover(function() { $(this).animate({height : "150",width : "300"} , 200 ); },function() { $(this).animate({height : "22",width : "60" } , 300 ); }); }); </script>
这段代码表示当鼠标浮于panel之上时，会让高度和宽度变大。当鼠标离开后，高度宽度变小。如果鼠标快速的移动移出就会有一个问题。就是它会一遍一遍的执行动作，直到动作完成。有一定的滞后效应。如何避免这一滞后效应呢？
我们可以通过stop() 方法。代码如下：
<script type="text/javascript"> $(function(){ $("#panel").hover(function() { $(this).stop().animate({height : "150",width : "300"} , 200 ); },function() { $(this).stop().animate({height : "22",width : "60" } , 300 ); }); }); </script>
也就是在执行动作之前，先结束上一个动作，这样就能避免快速移动移出后的滞后效果。
stop([clearQueue],[jumpToEnd])
clearQueue:如果设置成true，则清空队列。可以立即结束动画。
jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。
8.还有一些连在一起的动作。
<script type="text/javascript"> $(function(){ $("#panel h5.head").click(function(){ $(this).next().toggle(); }) }) </script>
toggle()切换消失与出现
<script type="text/javascript"> $(function(){ $("#panel h5.head").click(function(){ $(this).next().slideToggle(); }) }) </script>
slideToggle()切换上下帘效果
<script type="text/javascript"> $(function(){ $("#panel h5.head").click(function(){ $(this).next().fadeTo(600, 0.2); }) }) </script>
fadeTo()把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
9.animate方法模仿各种效果。
<script type="text/javascript"> $(function(){ $("button:eq(0)").click(function () { $("div.content").hide().animate({ opacity : "1" } );//隐藏元素并取消透明度 }); $("button:eq(1)").click(function () { $("div.content").animate({height : "show" , width : "show" , opacity : "show" } , 600 );//用animate仿show(),原理就是高、宽、透明度都显示 }); $("button:eq(2)").click(function () { $("div.content").animate({height : "show" } , 600 );//用animate仿slideDown() }); $("button:eq(3)").click(function () { $("div.content").animate({ opacity : "show" } , 600 );//用animate仿fadeIn() }); $("button:eq(4)").click(function () { $("div.content").animate({ opacity : "0.2" } , 600 );//用animate仿fadeTo() }); }) </script>
