1. 程式人生 > 實用技巧 >jQuery 動畫方法

jQuery 動畫方法

    1. 隱藏與顯示(利用了display屬性)
      • hide(); 隱藏 如: $("p").hide(); 下同
      • show(); 顯示
    2. 淡入與淡出(利用display屬性,可設引數設定快慢或時間)
      • fadeIn(); 淡入已隱藏元素
      • fadeOut(); 淡出可見元素
      • fadeToggle(); 在fadeIn()和fadeOut()之間進行切換
      • fadeTo(); 允許漸變為給定不透明度
        • fadeTo("slow",0.15)
    3. 滑動
      • slideDown() 下滑
      • slideUp 上滑
      • slideToggle() 在上滑和下滑之間切換
    4. 自定義動畫
      • animate() 方法用於自定義動畫
1 $("button").click(function(){
2     $("div").animate({
3     left:'250px', opacity:'0.5', height:'150px', width:'150px'
4     }); 
5 });      
    1. stop() 停止動畫效果
      • 在動畫完成之前,適用於所有jQuery效果函式,包括滑動,淡入淡出和自定義動畫。
      • 寫在動畫之前
        • 例如 $("p").stop().slideDown()
    2. 回撥函式
      • 當前動畫100%完成之後執行
1 $("button").click(function
(){ 2 $("p").hide("slow",function(){ 3 alert("段落現在被隱藏了"); 4 }); 5 });