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>
效果为不断变化的一个方块，因为最后一个动画$("div").slideUp("normal",runIt)执行后又 调用runIt方法，所以动画不断循环