jQuery封裝的動畫

jQuery封裝的動畫

jquery中的固定動畫

show():相當於display:block 可以加參數，   參數1 爲時間 參數2 爲動畫完成
hide():相當於display:none      參數1 爲時間 參數2 爲動畫完成

	$("#btn").click(function(){
        $(".block").hide(1000,function(){
            alert(1)
        })
    })//隱藏
    
    $("#btn1").click(function(){
        $(".block").show(1000,function(){
            alert(2)
        })
    })//顯示

toggle() show和hide結合版

$("#btn1").click(function(){
        $(".block").toggle(1000,function(){
            alert(2)
        })
    })

滑動效果

	$("#btn").click(function(){
        $(".block").slideUp(1000,function(){
            alert(1)
        })
	 })//上滑
 
    $("#btn1").click(function(){
        $(".block").slideDown(1000,function(){
            alert(1)
        })
	 })//下滑

上滑和下滑結合版

	$("#btn").click(function(){
        $(".block").slideToggle(1000,function(){
            alert(1)
        })
	 })

淡入淡出動畫

	$("#btn").click(function(){
        $(".block").fadeOut(1000,function(){    //淡出
            alert(1)
        })
    })
    
    $("#btn1").click(function(){
        $(".block").fadeIn(1000,function(){   //淡入
            alert(1)
        })
    })

透明度動畫

$("#btn").click(function(){
        $(".block").fadeOut(1000,function(){
            alert(1)
        })
        $(".block").fadeTo(1000,0.5,function(){
            alert(3)//透明度  時間，透明度，動畫完成時
        })
    })

自定義動畫
delay() 動畫的延遲 stop() 停止當前運行的動畫

$("#start").click(function(){
        $(".block").delay(1000).animate({
            marginLeft:"700px",
            opacity:0
        },1000,function(){
            //完成

        }).delay(1000).animate({
            marginLeft:"0",
            opacity:1
        },1000)
    });
    $("#stop").click(function(){
        $("block").stop();
    })