一.基礎(chǔ)效果
.hide([duration][,easing][,complete])
用于隱藏元素搀擂，沒有參數(shù)的時候相當(dāng)于直接設(shè)置display屬性
$('.box').hide()
//相當(dāng)于
$('.box').css('display','none')
.show([duration][,easing][,complete])
用于顯示元素寻拂，用法與hide相似
$('.show').on('click',function(){
$('.box').show()
})
.toggle([duration][,easing][,complete])
用來切換顯示和隱藏元素
$('.toggle').on('click',function(){
$('.box').toggle(300);
});
二.漸變效果
.fadeIn([duration][,easing][,complete])
通過淡入的方式顯示元素
$('.fadeIn').on('click',function(){
$('.box').fadeIn('slow')
})
.fadeOut([duration][,easing][,complete])
通過淡出的方式隱藏匹配元素
$('.fadeOut').on('click',function(){
$('.box').fadeOut('slow');
});
.fadeTo(duration,opacity[,easing][,complete])
調(diào)整匹配元素的透明度瓶佳，該方法通過調(diào)整元素的不透明度去做效果
$('.fadeTo').on('click',function(){
$('.box').fadeTo('slow',0.2);
});
.fadeToggle([duration][,easing][,complete])
匹配元素切換淡入(顯示)和淡出(隱藏)的效果
$('.fadeToggle').on('click',function(){
$('.box').fadeToggle('slow');
});
三.滑動效果
.slideDown( [duration ] [, easing ] [, complete ] )
用滑動動畫的效果顯示匹配的元素
$('.slideDown').on('click',function(){
$('.box').slideDown('slow');
});
.slideUp( [duration ] [, easing ] [, complete ] )
用滑動動畫的效果隱藏匹配的元素
$('.slideUp').on('click',function(){
$('.box').slideUp('slow');
});
.slideToggle( [duration ] [, easing ] [, complete ] )
用滑動動畫顯示或隱藏一個匹配元素
$('.slideToggle').on('click',function(){
$('.box').slideToggle('slow');
});
具體的動畫演示：http://js.jirengu.com/xagoj/2/
四.動畫隊列
問題一：動畫是同步還是異步的桌粉？
$('.hide').on('click',function(){
$('.box').hide(1400);
console.log('hide');
})
在上面這個例子中蒸绩，執(zhí)行代碼后，如果是同步铃肯，應(yīng)該是動畫完成后控制臺輸出hide侵贵，但如果是異步，應(yīng)該是動畫還沒有完成時缘薛，控制臺已經(jīng)輸出hide（如果不是很明顯窍育，適當(dāng)?shù)脑黾訒r間）
結(jié)果是當(dāng)動畫還沒有完成時，控制臺就已經(jīng)輸出了hide宴胧，這說明動畫是異步的
問題二：如果我想要動畫完成后在輸出漱抓，這樣要怎么寫？
我們只需要在動畫方法中添加一個回掉函數(shù)
$('.hide').on('click',function(){
$('.box').hide(1400,function(){
console.log('hide');
});
})
可是如果我想讓很多的效果一個個依次展示恕齐，是不是要這樣（看下面的例子）
$box.hide(1000, function(){
$box.show(1000, function(){
$box.fadeOut('slow',function(){
$box.fadeIn('slow',function(){
$box.slideUp(function(){
$box.slideDown(function(){
console.log('動畫執(zhí)行完畢')
})
})
})
})
})
})
這就叫回調(diào)地獄寫法乞娄。。显歧。仪或。
我們可以換一種寫法叫做jQuery動畫隊列的寫法
$box.hide(1000)
.show(1000)
.fadeOut()
.fadeIn()
.slideUp()
.slideDown(function(){
console.log('動畫執(zhí)行完畢了')
})
動畫隊列其實就是動畫隊列執(zhí)行的一個順序機制，對于同一對象的動畫效果會按照順序放入到動畫隊列中士骤，在動畫隊列中從下往上執(zhí)行動畫
image
五. 自定義動畫
當(dāng)上面的動畫已經(jīng)不滿足需求的時候范删，jQuery提供了自定義動畫的方法
.animate( properties [, duration ] [, easing ] [, complete ] )
properties是一個CSS屬性和值的對象,動畫將根據(jù)這組對象移動。
$('.animate').on('click',function(){
$('.box').animate({
left: '+=100',//對于左右的移動是在已經(jīng)定位的前提下
width: '200px'
},500);
});
這與css差不多拷肌，只不過css是一下子變化到旦，而animate是漸變的變化
