jQuery動畫

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 屬性會被立刻修改成當前動畫的目標值

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末枚钓,一起剝皮案震驚了整個濱河市铅搓,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌搀捷,老刑警劉巖星掰,帶你破解...
    沈念sama閱讀 216,744評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異嫩舟,居然都是意外死亡氢烘,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,505評論 3 392
  • 文/潘曉璐 我一進店門家厌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來播玖,“玉大人,你說我怎么就攤上這事饭于∈裉ぃ” “怎么了维蒙?”我有些...
    開封第一講書人閱讀 163,105評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長脓斩。 經(jīng)常有香客問我木西,道長畴栖,這世上最難降的妖魔是什么随静? 我笑而不...
    開封第一講書人閱讀 58,242評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮吗讶,結(jié)果婚禮上燎猛,老公的妹妹穿的比我還像新娘。我一直安慰自己照皆,他們只是感情好重绷,可當我...
    茶點故事閱讀 67,269評論 6 389
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著膜毁,像睡著了一般昭卓。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上瘟滨,一...
    開封第一講書人閱讀 51,215評論 1 299
  • 那天候醒,我揣著相機與錄音,去河邊找鬼杂瘸。 笑死倒淫,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的败玉。 我是一名探鬼主播敌土,決...
    沈念sama閱讀 40,096評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼运翼!你這毒婦竟也來了返干?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,939評論 0 274
  • 序言:老撾萬榮一對情侶失蹤血淌,失蹤者是張志新(化名)和其女友劉穎矩欠,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體六剥,經(jīng)...
    沈念sama閱讀 45,354評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡晚顷,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,573評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了疗疟。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片该默。...
    茶點故事閱讀 39,745評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖策彤,靈堂內(nèi)的尸體忽然破棺而出栓袖,到底是詐尸還是另有隱情匣摘,我是刑警寧澤,帶...
    沈念sama閱讀 35,448評論 5 344
  • 正文 年R本政府宣布裹刮,位于F島的核電站音榜,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏捧弃。R本人自食惡果不足惜赠叼,卻給世界環(huán)境...
    茶點故事閱讀 41,048評論 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望违霞。 院中可真熱鬧嘴办,春花似錦、人聲如沸买鸽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,683評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽眼五。三九已至妆艘,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間看幼,已是汗流浹背批旺。 一陣腳步聲響...
    開封第一講書人閱讀 32,838評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留桌吃,地道東北人朱沃。 一個月前我還...
    沈念sama閱讀 47,776評論 2 369
  • 正文 我出身青樓,卻偏偏與公主長得像茅诱,于是被迫代替她去往敵國和親逗物。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,652評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 隱藏元素的hide方法 讓頁面上的元素不可見瑟俭,一般可以通過設置css的display為none屬性翎卓。但是通過css...
    老夫撩發(fā)少年狂閱讀 1,089評論 0 2
  • jQuery中隱藏元素的hide方法 讓頁面上的元素不可見,一般可以通過設置css的display為none屬性摆寄。...
    阿r阿r閱讀 1,140評論 0 4
  • 展現(xiàn)和隱藏 .hide([duration ] [,easing ] [,complete ])用于隱藏元素失暴,沒有...
    學的會的前端閱讀 44評論 0 0
  • 基礎 .hide([duration ] [,easing ] [,complete ]) 用于隱藏元素,沒有參數(shù)...
    東郭皮蛋閱讀 268評論 0 0
  • 1感恩侯先生今天買了好多零食微饥,滿足了我的胃逗扒。謝謝,謝謝欠橘,謝謝 2感恩媽媽今天接聽了我的電話矩肩,能聽到你的聲音我很安心...
    竹學閱讀 93評論 0 0