jQuery入门[6]－动画

　2010-09-14 13:21:17　来源：WEB开发网　　　

核心提示：jQuery直接各种动画，常见的被封装成各种方法，jQuery入门[6]－动画，如show()/hide()/slideDown()/fadeIn()等等，参见：Effects最灵活的则属于animate( params, [duration], [easing], [callback] )方法，以下为来自官网的一个例

jQuery直接各种动画，常见的被封装成各种方法，如show()/hide()/slideDown()/fadeIn()等等，参见：Effects

最灵活的则属于animate( params, [duration], [easing], [callback] )方法，参见：animate

其中params为动画的运行结果，可以为各种样式属性，jQuery将在duration指定的时间内，将对象的当前状态渐变为params参数指定的值。如：

　　$("#go").click(function(){ 　　　$("#block").animate({ 　　　　width:"70%", 　　　　opacity:0.4, 　　　　marginLeft:"0.6in", 　　　　fontSize:"3em", 　　　　borderWidth:"10px" 　　　},1500); 　　});

params也可以是一些相对数据：

　　$("#right").click(function(){ 　　　$(".block").animate({"left":"+=50px"},"slow"); 　　}); 　　$("#left").click(function(){ 　　　$(".block").animate({"left":"-=50px"},"slow"); 　　});

通过stop()函数可将对象再在执行的动画暂停。选择符:animated可以判断对象是否处在动画运行状态。

以下为来自官网的一个例子：

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN" 　　　　　　　　　　"http://www.w3.org/TR/html4/loose.dtd"> <html> <head> 　<scriptsrc="http://code.jquery.com/jquery-latest.js"></script> 　　<script> 　$(document).ready(function(){ 　　　　$("#show").click(function(){ 　　　varn=$("div").queue("fx"); 　　　$("span").text("Queuelengthis:"+n.length); 　　}); 　　functionrunIt(){ 　　　$("div").show("slow"); 　　　$("div").animate({left:'+=200'},2000); 　　　$("div").slideToggle(1000); 　　　$("div").slideToggle("fast"); 　　　$("div").animate({left:'-=200'},1500); 　　　$("div").hide("slow"); 　　　$("div").show(1200); 　　　$("div").slideUp("normal",runIt); 　　} 　　runIt(); 　}); 　</script> 　<style> 　div{margin:3px;width:40px;height:40px; 　　　　position:absolute;left:0px;top:30px; 　　　　background:green;display:none;} 　div.newcolor{background:blue;} 　span{color:red;} 　</style> </head> <body> 　<buttonid="show">ShowLengthofQueue</button> 　<span></span> 　<div></div> </body> </html>