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