顯隱動(dòng)畫(huà)
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ù)說(shuō)明:
- 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)畫(huà)
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)畫(huà),off關(guān)閉動(dòng)畫(huà)
動(dòng)畫(huà)隊(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()
})