一，show和hide动画
案例：点击收缩和展开（类似于QQ面板的效果）
<script language="javascript"> $(document).ready(function () { $("#t1").click(function () { if ($("#t2").css("display")!="none") { $("#t2").hide(3000, function () { $("#t1").html("点击展开"); }); //3000代表时间，3000毫秒 逗号后面跟的是回调函数，hide执行完之后调用 } else { $("#t2").show(3000, function () { $("#t1").html("点击收缩"); }); } }); }) </script>
二，fadeIn和fadeOut动画（它只是一种颜色的渐变，透明到不透明的渐变）
案例：同上
<script language="javascript"> $(document).ready(function () { $("#t1").click(function () { if ($("#t2").css("display")!="none") { $("#t2").fadeOut(3000, function () { $("#t1").html("点击展开"); }); } else { $("#t2").fadeIn(3000, function () { $("#t1").html("点击收缩"); }); } }); }) </script>
三，slideUp和slideDown动画（类似于卷帘门的效果）
案例：同上
<script language="javascript"> $(document).ready(function () { $("#t1").click(function () { if ($("#t2").css("display")!="none") { $("#t2").slideUp(3000, function () { $("#t1").html("点击展开"); }); } else { $("#t2").slideDown(3000, function () { $("#t1").html("点击收缩"); }); } }); }) </script>
四，自定义动画animate（）
animate（params，speed，callback）有三个参数
params：包含样式{属性：值的一组参数} 如：{background-color:"red",color:"blue",height:"160px"}
speed:动画显示的速度，以毫秒为单位
callback：回调函数
原文：http://www.cnblogs.com/William-1234/p/4575322.html