jQuery之动画操作

显隐动画

show方法和hide方法：

$(selector).show(speed,callback)

• speed,显示的速度，可选值为毫秒、"slow"、"normal"、 "fast"
• callback，函数执行完后，要执行的函数

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函数，但是我们可以用一种间接的方法实现同样的效果

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

滑动效果

slideDown和slideUp方法：

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

slideUp([speed],[callback])缓慢收缩

参数说明：

• speed，速度
• 执行完后要执行的函数

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)

复杂动画

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实现定位：

        $("#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停止动画，off关闭动画

动画队列

            $("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(){   //将默认的队列fx替换为自定义的fa
                var fa=$("img").queue("fa")
                $("img").queue("fx",fa)
            })

使用dequeue()方法删除队列的最顶部的函数：

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