hide([duration ] [,easing ] [,complete ])
用于隱藏元素凉逛,沒有參數(shù)的時候等同于直接設置display屬性
參數(shù)
duration時間
動畫執(zhí)行的時間,持續(xù)時間是以毫秒為單位的踩验;值越大表示動畫執(zhí)行的越慢,不是越快商玫。還可以提供'fast' 和 'slow'字符串箕憾,分別表示持續(xù)時間為200 和 600毫秒。easing動畫運動的算法
jQuery庫中默認調(diào)用 swing拳昌。如果需要其他的動畫算法袭异,請查找相關(guān)的插件complete回調(diào)
動畫完成時執(zhí)行的函數(shù),這個可以保證當前動畫確定完成后發(fā)會觸發(fā)
$('.target').hide();
等同于 $('.target').css('display', 'none')
.show( [duration ] [, easing ] [, complete ] )
用于顯示元素炬藤,用法和hide類似
toggle( [duration ] [, easing ] [, complete ] )
用來切換元素的隱藏扁远、顯示,類似于toggleClass刻像,用法和show畅买、hide類似
漸變
.fadeIn( [duration ] [, easing ] [, complete ] )
通過淡入的方式顯示匹配元素,參數(shù)含義和上面相同
$('#book').fadeIn('slow', function() {
});
.fadeOut( [duration ] [, easing ] [, complete ] )
通過淡出的方式隱藏匹配元素
$('#book').fadeOut('slow', function() {
});
.fadeTo( duration, opacity [, easing ] [, complete ] )
調(diào)整匹配元素的透明度细睡,方法通過匹配元素的不透明度做動畫效果
$('#book').fadeTo('slow', 0.5, function() {
});
.fadeToggle( [duration ] [, easing ] [, complete ] )
通過匹配的元素的不透明度動畫谷羞,來顯示或隱藏它們,方法執(zhí)行匹配元素的不透明度動畫溜徙。當被可見元素調(diào)用時湃缎,元素不透明度一旦達到0,display樣式屬性設置為none 蠢壹,所以元素不再影響頁面的布局嗓违。
滑動
.slideDown( [duration ] [, easing ] [, complete ] )
用滑動動畫顯示一個匹配元素,方法將給匹配元素的高度的動畫图贸,這會導致頁面的下面部分滑下去蹂季,彌補了顯示的方式
$('#book').slideDown('slow', function() {
});
.slideUp( [duration ] [, easing ] [, complete ] )
用滑動動畫隱藏一個匹配元素冕广,方法將給匹配元素的高度的動畫,這會導致頁面的下面部分滑上去偿洁,當一個隱藏動畫后撒汉,高度值達到0的時候,display 樣式屬性被設置為none涕滋,以確保該元素不再影響頁面布局睬辐。 display 樣式屬性將被設置為none,以確保該元素不再影響頁面布局宾肺。
$('#book').slideUp('slow', function() {
});
.slideToggle( [duration ] [, easing ] [, complete ] )
用滑動動畫顯示或隱藏一個匹配元素溯饵,方法將給匹配元素的高度的動畫,這會導致頁面中锨用,在這個元素下面的內(nèi)容往下或往上滑丰刊。display屬性值保存在jQuery的數(shù)據(jù)緩存中,所以display可以方便以后可以恢復到其初始值黔酥。
如果一個元素的display屬性值為inline藻三,然后是隱藏和顯示,這個元素將再次顯示inline跪者。當一個隱藏動畫后棵帽,高度值達到0的時候,display 樣式屬性被設置為none渣玲,以確保該元素不再影響頁面布局逗概。
$('#clickme').click(function() {
$('#book').slideToggle('slow', function() {
});
});
自定義動畫
.animate( properties [, duration ] [, easing ] [, complete ] )
properties是一個CSS屬性和值的對象,動畫將根據(jù)這組對象移動。
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
});
});
.clearQueue
清除動畫隊列中未執(zhí)行的動畫
.finish
停止當前動畫忘衍,并清除動畫隊列中所有未完成的動畫,最終展示動畫隊列最后一幀的最終狀態(tài)
stop( [clearQueue ] [, jumpToEnd ] )
停止當前正在運行的動畫
.stop(true);
停止所有動畫逾苫。
.stop(true,true);
立即完成當前動畫后停止所有動畫,該元素上的 CSS 屬性會被立刻修改成當前動畫的目標值