JQ动画
1、show()和hidde()
显示和隐藏
$("#btn").toggle(function (){
//先隐藏掉
$("#div"‘).hide(‘slow‘);
},function(){
//再显示出来
$("#div").show(‘slow‘);
});
2、slideUp()和slideDown()
滑动隐藏和滑动显示
slideUp(speed,回调函数)
slideDown(speed,回调函数)
$("#btn").toggle(function (){
$("#div"‘).slideUp();
},function(){
$("#div").slideDown();
});
fadeOut(speed,回调函数)通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
$("#btn").toggle(function (){
$("#div").fadeIn(‘slow‘);
},function(){
$("#div").fadeOut(‘slow‘);
});
说明：
三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)；
回调函数是指时间结束后执行的函数。
4、自定义动画 .animate() 参数1：要达到的样式 ；参数2：时间 ；参数3：回调函数
$(this).stop().animate({ "height":40) }, 500);//stop()阻止动画累积
5、颜色渐变
注意：引入文件放在JQuery后面
$(this).animate({"background-color":"#2c24f5"},500);//这句代码会将原来的背景色渐变为#2c24f5
原文：http://www.cnblogs.com/power8023/p/6059852.html