顯隱動(dòng)畫

show方法和hide方法：

$(selector).show(speed,callback)

• speed,顯示的速度，可選值為毫秒、"slow"、"normal"、 "fast"
• callback，函數(shù)執(zhí)行完后，要執(zhí)行的函數(shù)

for(var i=0;i<5;i++){
    $("body").append("<div><div>")
}
$("div").click(function(){
    $(this).hide()
})
$("body").append("<button>show</button>")
$("button").click(function(){
    $("div").show()
})

顯隱切換

在jQuery1.9之后，刪除了toggle函數(shù)，但是我們可以用一種間接的方法實(shí)現(xiàn)同樣的效果

var state=1
$("#button1").click(function(){
    state=!state
    if(state){
        $("p").show()
    }
    else{
        $("p").hide()
    }
})

滑動(dòng)效果

slideDown和slideUp方法：

slideDown([speed],[callback]) 緩慢舒展

slideUp([speed],[callback])緩慢收縮

參數(shù)說明：

• speed，速度
• 執(zhí)行完后要執(zhí)行的函數(shù)

var slideState=1
$("#slide").click(function(){
    slideState=!slideState
    if(slideState){
        $("img").slideUp(2000);
    }
    else{
        $("img").slideDown(2000)
    }
})

使用callback：

$("img").slideUp(2000,function(){
    $(this).remove()
})

漸變效果

fadeIn和fadeOut方法：

fadeIn([speed],[callback])

fadeOut([speed],[callback])

//fadeIn
var fadeState=1
$("#fadeIn").click(function(){
    fadeState=!fadeState
    if (fadeState) {
        $("img").fadeIn(2000)
    }
    else{
        $("img").fadeOut(2000)
    }
})

淡出的透明效果fadeTo：

fadeTo([speed],opacity,[callback])

$("img").fadeTo(1000,0.5)

漸變切換fadeToggle方法：

$("img").fadeToggle(2000)

復(fù)雜動(dòng)畫

animate方法：

animate(style,[speed],[eading],[callback])

$("#animate").click(function(){
    $("img").animate({
        width:"100px",
        height:"200px",
    },3000)
    $("img").animate({
        width:"300px",
        height:"400px"
    },3000,function(){
        $("#animate").click()
    })
})

用animate實(shí)現(xiàn)定位：

        $("#position").click(function(){
                $("img").animate({
                    left:300,
                    top:0
                },2000)
                $("img").animate({
                    left:300,
                    top:300
                },2000)
                $("img").animate({
                    left:0,
                    top:300
                },2000)
                $("img").animate({
                    left:0,
                    top:0
                },2000,function(){
                    $("#position").click()
                })
            })

stop停止動(dòng)畫，off關(guān)閉動(dòng)畫

動(dòng)畫隊(duì)列

            $("img").queue("fa",function(){
                    $("img").animate({
                    left:300,
                    top:0
                },2000)
                $("img").animate({
                    left:300,
                    top:300
                },2000)
                $("img").animate({
                    left:0,
                    top:300
                },2000)
                $("img").animate({
                    left:0,
                    top:0
                },2000,function(){
                    //$("#queue").click()
                    $("#updateQueue").click()
                })
                
            })
            $("#queue").click(function(){
                $("img").animate({
                    left:300,
                    top:300
                },2000)
                $("img").animate({
                    left:0,
                    top:0
                    },2000,function(){
                        $("#queue").click()
                    })
                })
            
            $("#updateQueue").click(function(){   //將默認(rèn)的隊(duì)列fx替換為自定義的fa
                var fa=$("img").queue("fa")
                $("img").queue("fx",fa)
            })

使用dequeue()方法刪除隊(duì)列的最頂部的函數(shù)：

$("#dequeue").click(function(){
    $("img").dequeue()
})