JQuery动画

一、show()和hidde()
显示和隐藏

$("#btn").toggle(function (){  
        //先隐藏掉  
        $("#div"').hide('slow');  
        },function(){  
    //再显示出来  
        $("#div").show('slow');  
              
    });       

二、slideUp()和slideDown() 

滑动隐藏和滑动显示

slideUp(speed,回调函数) 

经过高度变化（向上减少）来动态地隐藏全部匹配的元素，在隐藏完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，能够使匹配的元素以“滑动”的方式隐藏起来。

slideDown(speed,回调函数)

经过高度变化（向下增大）来动态地显示全部匹配的元素，在显示完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，能够使匹配的元素以“滑动”的方式显示出来

$("#btn").toggle(function (){  
     
        $("#div"').slideUp();  
        },function(){  
     
        $("#div").slideDown();  
              
    });       

三、fadeOut()和fadeIn()

淡入淡出

fadeIn(speed,回调函数) 方法使用淡入效果来显示被选元素，（该元素是隐藏的）;

fadeOut(speed,回调函数)经过不透明度的变化来实现全部匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说全部匹配的元素的高度和宽度不会发生变化。

$("#btn").toggle(function (){         
        $("#div").fadeIn('slow');  
        },function(){ 
        $("#div").fadeOut('slow');               
    });  

说明：

     三种预约速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)；

     回调函数是指时间结束后执行的函数。

 四、自定义动画 .animate() 参数1：要达到的样式 ；参数2：时间 ；参数3：回调函数

$(this).stop().animate({ "height":40) }, 500);//stop()阻止动画累积

五、颜色渐变

注意：引入文件放在JQuery后面

$(this).animate({"background-color":"#2c24f5"},500);//这句代码会将原来的背景色渐变为#2c24f5