2023學(xué)年完整公開(kāi)課版jQuery動(dòng)畫(huà)特效

《物聯(lián)網(wǎng)Web前端開(kāi)發(fā)基礎(chǔ)》課程

jQuery動(dòng)畫(huà)特效【任務(wù)9-6】jQuery動(dòng)畫(huà)特效下面將帶領(lǐng)讀者學(xué)習(xí)jQuery動(dòng)畫(huà)特效。需求分析在Web開(kāi)發(fā)中，動(dòng)畫(huà)效果的添加，不僅可以增加頁(yè)面的美感，更能增強(qiáng)用戶(hù)的體驗(yàn)。jQuery中提供了兩種增加動(dòng)畫(huà)效果的方法，一種是內(nèi)置的動(dòng)畫(huà)方法，另一種是通過(guò)animate()方法進(jìn)行自定義動(dòng)畫(huà)效果?！救蝿?wù)9-6】jQuery動(dòng)畫(huà)特效知識(shí)儲(chǔ)備——常用動(dòng)畫(huà)jQuery提供了許多動(dòng)畫(huà)效果。例如，一個(gè)元素逐漸出現(xiàn)在用戶(hù)的視野，或是一個(gè)元素漸漸淡出效果等?！救蝿?wù)9-6】jQuery動(dòng)畫(huà)特效知識(shí)儲(chǔ)備——常用動(dòng)畫(huà)分類(lèi)方法說(shuō)明基本特效show([speed,[easing],[fn]])顯示隱藏的匹配元素hide([speed,[easing],[fn]])隱藏顯示的匹配元素toggle([speed],[easing],[fn])元素顯示與隱藏切換滑動(dòng)特效slideDown([speed],[easing],[fn])垂直滑動(dòng)顯示匹配元素（向下增大）slideUp([speed,[easing],[fn]])垂直滑動(dòng)顯示匹配元素（向上減小）slideToggle([speed],[easing],[fn])在slideUp()和slideDown()兩種效果間的切換淡入淡出fadeIn([speed],[easing],[fn])淡入顯示匹配元素fadeOut([speed],[easing],[fn])淡出隱藏匹配元素fadeTo([[speed],opacity,[easing],[fn]])以淡入淡出方式將匹配元素調(diào)整到指定的透明度f(wàn)adeToggle([speed,[easing],[fn]])在fadeIn()和fadeOut()兩種效果間的切換【任務(wù)9-6】jQuery動(dòng)畫(huà)特效知識(shí)儲(chǔ)備——常用動(dòng)畫(huà)參數(shù)speed表示動(dòng)畫(huà)的速度，可設(shè)置為動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒值（如1000），或預(yù)定的3種速度（slow、fast和normal）。參數(shù)easing表示切換效果，默認(rèn)效果為swing，還可以使用linear效果。參數(shù)fn表示在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)。參數(shù)opacity表示透明度數(shù)值（范圍在0~1之間，0代表完全透明，0.5表示50%透明，1代表完全不透明）。【任務(wù)9-6】jQuery動(dòng)畫(huà)特效知識(shí)儲(chǔ)備——常用動(dòng)畫(huà)【任務(wù)9-6】jQuery動(dòng)畫(huà)特效知識(shí)儲(chǔ)備——自定義動(dòng)畫(huà)jQuery中除了常用的顯示、隱藏、滑動(dòng)以及淡入淡出特效外，還支持自定義動(dòng)畫(huà)，用戶(hù)可以根據(jù)開(kāi)發(fā)需求自定義?！救蝿?wù)9-6】jQuery動(dòng)畫(huà)特效知識(shí)儲(chǔ)備——自定義動(dòng)畫(huà)方法說(shuō)明animate(params[,speed][,easing][,fn])用于創(chuàng)建自定義動(dòng)畫(huà)的函數(shù)$.speed([speed][,settings])創(chuàng)建一個(gè)包含一組屬性的對(duì)象用來(lái)定義自定義動(dòng)畫(huà)queue([queueName])顯示被選元素上要執(zhí)行的函數(shù)隊(duì)列delay(speed[,queueName])設(shè)置一個(gè)延時(shí)來(lái)推遲執(zhí)行隊(duì)列中之后的項(xiàng)目clearQueue([queueName])從尚未運(yùn)行的隊(duì)列中移除所有項(xiàng)目dequeue([queueName])從隊(duì)列移除下一個(gè)函數(shù)，然后執(zhí)行函數(shù)finish([queueName])停止當(dāng)前正在運(yùn)行的動(dòng)畫(huà)，刪除所有排隊(duì)的動(dòng)畫(huà)，并完成匹配元素所有的動(dòng)畫(huà)stop([clearQueue][,jumpToEnd])停止所有在指定元素上正在運(yùn)行的動(dòng)畫(huà)【任務(wù)9-6】jQuery動(dòng)畫(huà)特效知識(shí)儲(chǔ)備——自定義動(dòng)畫(huà)參數(shù)params表示一組包含動(dòng)畫(huà)最終屬性值的集合。參數(shù)settings是easing與fn組成的一個(gè)對(duì)象集合。參數(shù)queueName表示隊(duì)列名稱(chēng)，默認(rèn)值為fx（標(biāo)準(zhǔn)效果隊(duì)列）。參數(shù)clearQueue與jumpToEnd都是布爾類(lèi)型，默認(rèn)值為false，前者規(guī)定是否停止被選元素所有加入隊(duì)列的動(dòng)畫(huà)，后者規(guī)定是否立即完成當(dāng)前的動(dòng)畫(huà)?！救蝿?wù)9-6】jQuery動(dòng)畫(huà)特效知識(shí)儲(chǔ)備——自定義動(dòng)畫(huà)【任務(wù)9-6】jQuery動(dòng)畫(huà)特效知識(shí)儲(chǔ)備——自定義動(dòng)畫(huà)<inputid="btn"type="submit"value="開(kāi)始動(dòng)畫(huà)"><div></div><script>$('#btn').click(function(){ $('div').css({background:'red',width:0,height:0}); varparams={width:'100px',height:'100px'}; varsettings=$.speed(2000,'linear'); $('div').animate(params,settings);});</script>【任務(wù)9-6】jQuery動(dòng)畫(huà)特效知識(shí)儲(chǔ)備——自定義動(dòng)畫(huà)$('div').show('slow').animate({left:'+=200'},2000).animate({left:'-=200'},1500).slideUp('normal',runQue);$('div').queue('fx').length【任務(wù)9-6】jQuery動(dòng)畫(huà)特效知識(shí)儲(chǔ)備——自定義動(dòng)畫(huà)div.show('slow').animate({left:'+=200'},2000).queue(function(){$(this).css('background','green').dequeue();}).animate({left:'-=200'},1500).slideUp('normal',runQue).queue(function()