Web前端技術(shù)主講人：XXX

XXX學(xué)院任務(wù)21使用jQuery實(shí)現(xiàn)焦點(diǎn)幻燈效果【知識目標(biāo)】

掌握animate()的基本語法及應(yīng)用；

掌握如何延遲動畫；

掌握animate()操作多個(gè)屬性的方法；

掌握animate()使用相對值的方法；

掌握動畫隊(duì)列的應(yīng)用。【技能目標(biāo)】

能夠使用animate()方法創(chuàng)建簡單的自定義動畫；

能夠使用動畫隊(duì)列知識實(shí)現(xiàn)較復(fù)雜的動畫效果?！舅刭|(zhì)目標(biāo)】

培養(yǎng)學(xué)生探究學(xué)習(xí)的能力；

培養(yǎng)學(xué)生拼搏精神；

增強(qiáng)學(xué)生對我國傳統(tǒng)文化的認(rèn)同感和文化自信。教學(xué)目標(biāo)知識導(dǎo)圖自定義動畫基礎(chǔ)animate()基本語法及應(yīng)用jQuery提供了用于自定義動畫的事件方法animate()，開發(fā)者可以根據(jù)需要定制各種不同的動畫效果。如下為animate()方法的基本語法。$("selector").animate({params},speed,callback)參數(shù)說明如下。params：必選，該參數(shù)用于定義在執(zhí)行animate()方法時(shí)要改變的CSS屬性。speed：可選，該參數(shù)用于定義動畫效果的速度，參數(shù)值可以是slow、normal、fast或者毫秒數(shù)，時(shí)間越短，動畫速度越快，時(shí)間越長，動畫速度越慢。callback：可選，該參數(shù)用于定義animate()方法執(zhí)行結(jié)束后調(diào)用的函數(shù)，通常稱為回調(diào)函數(shù)?！景咐靠刂菩∑嚨倪\(yùn)動animate()操作多個(gè)屬性animate()操作多個(gè)屬性在應(yīng)用自定義動畫時(shí)，通常需要同時(shí)執(zhí)行多個(gè)動畫，例如，在改變位置的同時(shí)也改變顏色、大小、透明度等。在實(shí)現(xiàn)上，只需設(shè)置多個(gè)CSS屬性即可,但需注意，多個(gè)屬性值之間用逗號隔開?！景咐靠刂茪馇虻倪\(yùn)動。具體業(yè)務(wù)邏輯為：單擊按鈕后，氣球向上運(yùn)動；氣球隨著運(yùn)動而變?。粴馇蜃詈笙В赐该鞫茸?yōu)?）animate()使用相對值animate()使用相對值在使用animate()設(shè)置自定義動畫時(shí)，參數(shù)中的CSS屬性值可以使用相對值，即每次調(diào)用時(shí)，CSS屬性值會在原有值的基礎(chǔ)上進(jìn)行添加或減少，設(shè)置值的時(shí)候需要在值的前面加上“+=”或“-=”運(yùn)算符。示例代碼如下?！景咐棵看螁螕簟白兇蟆卑粹o時(shí)，圖片將會在原來寬度的基礎(chǔ)上等比增大200像素。動畫隊(duì)列動畫隊(duì)列同一個(gè)元素對象，如果定義了多個(gè)動畫，動畫會排隊(duì)等待執(zhí)行。如果是不同的元素對象都有動畫，不會出現(xiàn)排隊(duì)機(jī)制?！景咐繂螕簟伴_始動畫”按鈕，執(zhí)行動畫。具體業(yè)務(wù)邏輯為：動畫的效果依次為：方框的高度變成500像素，透明度變成0.4；方框的寬度變成500像素，透明度變成0.8；方框的高度變成300像素，透明度變成0.4；方框的寬度變成300像素，透明度變成1，并逐漸過渡為圓形；從左側(cè)飛入文本。停止動畫和動畫狀態(tài)判斷停止動畫和動畫狀態(tài)判斷1.停止動畫在實(shí)際的應(yīng)用中，有時(shí)需要停止匹配元素正在進(jìn)行的動畫，這時(shí)可以使用停止元素的動畫方法stop()，它的語法格式如下。stop([clearQueue],[gotoEnd])參數(shù)說明如下。clearQueue：可選，代表是否要清空未執(zhí)行完的動畫隊(duì)列。gotoEnd：可選，代表是否直接將正在執(zhí)行的那個(gè)動畫跳轉(zhuǎn)到末狀態(tài)。stop()方法有以下幾種應(yīng)用方法。（1）stop(false,false)：由于false是默認(rèn)值，因此可簡寫為stop()。該用法表示停止當(dāng)前動畫，并從目前的動畫狀態(tài)開始動畫隊(duì)列中的下一個(gè)動畫。（2）stop(true,false)：由于false是默認(rèn)值，可簡寫為stop(true)。該用法表示停止所有動畫，保持當(dāng)前狀態(tài)，瞬間停止。（3）stop(false,true)：該用法表示停止當(dāng)前動畫，跳轉(zhuǎn)到當(dāng)前動畫的末狀態(tài)，然后進(jìn)入隊(duì)列中的下一個(gè)動畫。（4）stop(true,true)：該用法表示停止所有動畫，跳轉(zhuǎn)到當(dāng)前動畫的末狀態(tài)。停止動畫和動畫狀態(tài)判斷12.動畫狀態(tài)判斷在使用animate()方法自定義時(shí)，有時(shí)需