jQuery動(dòng)畫

hide([duration ] [,easing ] [,complete ])

用于隱藏元素,沒有參數(shù)的時(shí)候等同于直接設(shè)置display屬性
參數(shù)

  • duration時(shí)間
    動(dòng)畫執(zhí)行的時(shí)間,持續(xù)時(shí)間是以毫秒為單位的;值越大表示動(dòng)畫執(zhí)行的越慢,不是越快。還可以提供'fast' 和 'slow'字符串,分別表示持續(xù)時(shí)間為200 和 600毫秒。

  • easing動(dòng)畫運(yùn)動(dòng)的算法
    jQuery庫(kù)中默認(rèn)調(diào)用 swing。如果需要其他的動(dòng)畫算法,請(qǐng)查找相關(guān)的插件

  • complete回調(diào)
    動(dòng)畫完成時(shí)執(zhí)行的函數(shù),這個(gè)可以保證當(dāng)前動(dòng)畫確定完成后發(fā)會(huì)觸發(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)整匹配元素的透明度,方法通過匹配元素的不透明度做動(dòng)畫效果

$('#book').fadeTo('slow', 0.5, function() {

});

.fadeToggle( [duration ] [, easing ] [, complete ] )

通過匹配的元素的不透明度動(dòng)畫,來顯示或隱藏它們,方法執(zhí)行匹配元素的不透明度動(dòng)畫。當(dāng)被可見元素調(diào)用時(shí),元素不透明度一旦達(dá)到0,display樣式屬性設(shè)置為none ,所以元素不再影響頁(yè)面的布局。

滑動(dòng)

.slideDown( [duration ] [, easing ] [, complete ] )

用滑動(dòng)動(dòng)畫顯示一個(gè)匹配元素,方法將給匹配元素的高度的動(dòng)畫,這會(huì)導(dǎo)致頁(yè)面的下面部分滑下去,彌補(bǔ)了顯示的方式

$('#book').slideDown('slow', function() {
    
});

.slideUp( [duration ] [, easing ] [, complete ] )

用滑動(dòng)動(dòng)畫隱藏一個(gè)匹配元素,方法將給匹配元素的高度的動(dòng)畫,這會(huì)導(dǎo)致頁(yè)面的下面部分滑上去,當(dāng)一個(gè)隱藏動(dòng)畫后,高度值達(dá)到0的時(shí)候,display 樣式屬性被設(shè)置為none,以確保該元素不再影響頁(yè)面布局。 display 樣式屬性將被設(shè)置為none,以確保該元素不再影響頁(yè)面布局。

$('#book').slideUp('slow', function() {
  
});

.slideToggle( [duration ] [, easing ] [, complete ] )

用滑動(dòng)動(dòng)畫顯示或隱藏一個(gè)匹配元素,方法將給匹配元素的高度的動(dòng)畫,這會(huì)導(dǎo)致頁(yè)面中,在這個(gè)元素下面的內(nèi)容往下或往上滑。display屬性值保存在jQuery的數(shù)據(jù)緩存中,所以display可以方便以后可以恢復(fù)到其初始值。

如果一個(gè)元素的display屬性值為inline,然后是隱藏和顯示,這個(gè)元素將再次顯示inline。當(dāng)一個(gè)隱藏動(dòng)畫后,高度值達(dá)到0的時(shí)候,display 樣式屬性被設(shè)置為none,以確保該元素不再影響頁(yè)面布局。

$('#clickme').click(function() {
 $('#book').slideToggle('slow', function() {

 });
});

自定義動(dòng)畫

.animate( properties [, duration ] [, easing ] [, complete ] )

properties是一個(gè)CSS屬性和值的對(duì)象,動(dòng)畫將根據(jù)這組對(duì)象移動(dòng)。

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
   
  });
});

.clearQueue

清除動(dòng)畫隊(duì)列中未執(zhí)行的動(dòng)畫

.finish

停止當(dāng)前動(dòng)畫,并清除動(dòng)畫隊(duì)列中所有未完成的動(dòng)畫,最終展示動(dòng)畫隊(duì)列最后一幀的最終狀態(tài)

stop( [clearQueue ] [, jumpToEnd ] )

停止當(dāng)前正在運(yùn)行的動(dòng)畫
.stop(true); 停止所有動(dòng)畫。
.stop(true,true);立即完成當(dāng)前動(dòng)畫后停止所有動(dòng)畫,該元素上的 CSS 屬性會(huì)被立刻修改成當(dāng)前動(dòng)畫的目標(biāo)值

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 隱藏元素的hide方法 讓頁(yè)面上的元素不可見,一般可以通過設(shè)置css的display為none屬性。但是通過css...
    老夫撩發(fā)少年狂閱讀 1,194評(píng)論 0 2
  • jQuery中隱藏元素的hide方法 讓頁(yè)面上的元素不可見,一般可以通過設(shè)置css的display為none屬性。...
    阿r阿r閱讀 1,267評(píng)論 0 4
  • 展現(xiàn)和隱藏 .hide([duration ] [,easing ] [,complete ])用于隱藏元素,沒有...
    學(xué)的會(huì)的前端閱讀 100評(píng)論 0 0
  • 基礎(chǔ) .hide([duration ] [,easing ] [,complete ]) 用于隱藏元素,沒有參數(shù)...
    東郭皮蛋閱讀 287評(píng)論 0 0
  • 1感恩侯先生今天買了好多零食,滿足了我的胃。謝謝,謝謝,謝謝 2感恩媽媽今天接聽了我的電話,能聽到你的聲音我很安心...
    竹學(xué)閱讀 147評(píng)論 0 0

友情鏈接更多精彩內(nèi)容