2018-09-27 動(dòng)畫(huà)隊(duì)列

jQuery提供了以下幾種方法來(lái)操作動(dòng)畫(huà)隊(duì)列寓调。
stop([clearQuery],[gotoEnd]):停止當(dāng)前jQuery對(duì)象里每個(gè)DOM元素上正在執(zhí)行的動(dòng)畫(huà)疆导。

queue([queueName,]callback):將callback動(dòng)畫(huà)數(shù)添加到當(dāng)前jQuery對(duì)象里所有DOM元素的動(dòng)畫(huà)函數(shù)隊(duì)列的尾部驶臊。

queue([queueName,]naeQueue):用newQueue動(dòng)畫(huà)函數(shù)隊(duì)列代替當(dāng)前jQuery對(duì)象里所的DOM元素的動(dòng)畫(huà)函數(shù)隊(duì)列豪治。

dequeue():執(zhí)行動(dòng)畫(huà)函數(shù)隊(duì)列頭的第一個(gè)動(dòng)畫(huà)函數(shù),并將該動(dòng)畫(huà)函數(shù)移出隊(duì)列烤礁。

clearQueue([queueName]):清空動(dòng)畫(huà)函數(shù)隊(duì)列中的所有動(dòng)畫(huà)函數(shù)讼积。
可選的 callback 參數(shù)是動(dòng)畫(huà)完成后所執(zhí)行的函數(shù)名稱。

<style>  
    div {  
        width: 60px;   
        height: 60px;  
        position:absolute;  
        top:60px;   
        background: #f0f;  
        display:none;  
    }  
    </style>  
</head>  
<body>  
    <script type="text/javascript" src="../jquery-1.8.0.js">  
    </script>  
    <p>動(dòng)畫(huà)隊(duì)列的長(zhǎng)度是:<span></span></p>  
    <div></div>  
    <script type="text/javascript">  
    var div = $("div");  
    function runIt()  
    {  
        // 第1個(gè)動(dòng)畫(huà):顯示出來(lái)  
        div.show("slow");  
        // 第2個(gè)動(dòng)畫(huà):自動(dòng)動(dòng)畫(huà)脚仔,水平左移300px  
        div.animate({left:'+=300'},2000);  
        // 第3個(gè)動(dòng)畫(huà):卷起來(lái)  
        div.slideToggle(1000);  
        // 第4個(gè)動(dòng)畫(huà):放下來(lái)  
        div.slideToggle("fast");  
        // 第5個(gè)動(dòng)畫(huà):自動(dòng)動(dòng)畫(huà)勤众,水平右移300px  
        div.animate({left:'-=300'},1500);  
        // 第6個(gè)動(dòng)畫(huà):隱藏出來(lái)  
        div.hide("slow");  
        // 第7個(gè)動(dòng)畫(huà):顯示出來(lái)  
        div.show(1200);  
        // 第8個(gè)動(dòng)畫(huà):卷起來(lái),動(dòng)畫(huà)完成后回調(diào)runIt  
        div.slideUp("normal", runIt);  
    }  
    // 控制每0.1秒調(diào)用一次該方法鲤脏,該方法用于顯示動(dòng)畫(huà)隊(duì)列的長(zhǎng)度  
    function showIt()  
    {  
        var n = div.queue();  
        $("span").text(n.length);  
        setTimeout(showIt, 100);  
    }  
    runIt();  
    showIt();  
    </script>

ps: 隊(duì)列是一種列表们颜,不同的是隊(duì)列只能在末尾插入元素吕朵,在隊(duì)首刪除元素。隊(duì)列用于存儲(chǔ)按順序排列的數(shù)據(jù)窥突。先進(jìn)先出努溃。這點(diǎn)和棧不一樣,在棧中波岛,最后入棧的元素反被優(yōu)先處理茅坛。可以將隊(duì)列想象成銀行排隊(duì)辦理業(yè)務(wù)的人则拷,排隊(duì)在第一個(gè)的人先辦理業(yè)務(wù),其它人只能排著曹鸠,直到輪到他們?yōu)橹埂?/p>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末煌茬,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子彻桃,更是在濱河造成了極大的恐慌坛善,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,036評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件邻眷,死亡現(xiàn)場(chǎng)離奇詭異眠屎,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)肆饶,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,046評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門改衩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人驯镊,你說(shuō)我怎么就攤上這事葫督。” “怎么了板惑?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,411評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵橄镜,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我冯乘,道長(zhǎng)洽胶,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,622評(píng)論 1 293
  • 正文 為了忘掉前任裆馒,我火速辦了婚禮姊氓,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘领追。我一直安慰自己他膳,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,661評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布绒窑。 她就那樣靜靜地躺著棕孙,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上蟀俊,一...
    開(kāi)封第一講書(shū)人閱讀 51,521評(píng)論 1 304
  • 那天钦铺,我揣著相機(jī)與錄音,去河邊找鬼肢预。 笑死矛洞,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的烫映。 我是一名探鬼主播沼本,決...
    沈念sama閱讀 40,288評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼锭沟!你這毒婦竟也來(lái)了抽兆?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,200評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤族淮,失蹤者是張志新(化名)和其女友劉穎辫红,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體祝辣,經(jīng)...
    沈念sama閱讀 45,644評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡贴妻,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,837評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了蝙斜。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片名惩。...
    茶點(diǎn)故事閱讀 39,953評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖乍炉,靈堂內(nèi)的尸體忽然破棺而出绢片,到底是詐尸還是另有隱情,我是刑警寧澤岛琼,帶...
    沈念sama閱讀 35,673評(píng)論 5 346
  • 正文 年R本政府宣布底循,位于F島的核電站,受9級(jí)特大地震影響槐瑞,放射性物質(zhì)發(fā)生泄漏熙涤。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,281評(píng)論 3 329
  • 文/蒙蒙 一困檩、第九天 我趴在偏房一處隱蔽的房頂上張望祠挫。 院中可真熱鬧,春花似錦悼沿、人聲如沸等舔。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,889評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)慌植。三九已至甚牲,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蝶柿,已是汗流浹背丈钙。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,011評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留交汤,地道東北人雏赦。 一個(gè)月前我還...
    沈念sama閱讀 48,119評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像芙扎,于是被迫代替她去往敵國(guó)和親星岗。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,901評(píng)論 2 355

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

  • 1.ios高性能編程 (1).內(nèi)層 最小的內(nèi)層平均值和峰值(2).耗電量 高效的算法和數(shù)據(jù)結(jié)構(gòu)(3).初始化時(shí)...
    歐辰_OSR閱讀 29,386評(píng)論 8 265
  • 1.JQuery 基礎(chǔ) 改變web開(kāi)發(fā)人員創(chuàng)造搞交互性界面的方式戒洼。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性伍茄。 1....
    LaBaby_閱讀 1,335評(píng)論 0 2
  • 在線閱讀 http://interview.poetries.top[http://interview.poetr...
    程序員poetry閱讀 114,385評(píng)論 24 450
  • 1.JQuery 基礎(chǔ) 改變web開(kāi)發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性施逾。 1....
    LaBaby_閱讀 1,174評(píng)論 0 1
  • 一個(gè)鮮活的事物出現(xiàn) 注意力瞬間飛起 不管不顧 能量漸漸流逝 注意力緩緩落下 愛(ài)搭不理
    廣電一班張晨陽(yáng)閱讀 96評(píng)論 0 1