jQuery編程動(dòng)畫(huà)的基本方法示例詳解
一、動(dòng)畫(huà)
jQuery提供了一些列的動(dòng)畫(huà)基本方法,同時(shí)也提供了自定動(dòng)畫(huà)方案.animate()
。
.show()
當(dāng)提供一個(gè) duration(持續(xù)時(shí)間)參數(shù),.show()成為一個(gè)動(dòng)畫(huà)方法。.show()方法將為匹配元素的寬度,高度,以及不透明度,同時(shí)進(jìn)行動(dòng)畫(huà)操作。
持續(xù)時(shí)間是以毫秒為單位的,數(shù)值越大,動(dòng)畫(huà)越慢,不是越快。字符串 'fast' 和 'slow' 分別代表200和600毫秒的延時(shí)。
出了上述時(shí)間,還可以自定時(shí)間,接受毫秒為參數(shù)
jQuery默認(rèn)只提供兩個(gè)緩沖效果:調(diào)用 swing, 在一個(gè)恒定的速度進(jìn)行;調(diào)用 linear. 更多的緩動(dòng)函數(shù)要使用的插件
$("button").click(function () { $("p").show("slow"); });
.hide()
$("#hidr").click(function () { $("div").hide(1000); });
.fadeIn()
通過(guò)淡入的方式顯示匹配元素。
$(document.body).click(function () { $("div:hidden:first").fadeIn("slow"); });
.fadeOut()
通過(guò)淡出的方式顯示匹配元素。
$("p").fadeOut("slow");
.animate()
$("#go").click(function(){ $("#block").animate({ width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "3em", borderWidth: "10px" }, 1500 ); });
.slideDown()
用滑動(dòng)動(dòng)畫(huà)顯示一個(gè)匹配元素。
$("div").slideDown("slow");
.slideUp()
$(document.body).click(function () { if ($("div:first").is(":hidden")) { $("div").show("slow"); } else { $("div").slideUp(); } });
.delay()
設(shè)置一個(gè)延時(shí)來(lái)推遲執(zhí)行隊(duì)列中后續(xù)的項(xiàng)。
$("div.first").slideUp(300).delay(800).fadeIn(400);
.clearQueue()
從列隊(duì)中移除所有未執(zhí)行的項(xiàng)。
$("#start").click(function () { $("div").slideUp(300).delay(800).fadeIn(400); }) $("#stop").click(function () { var myDiv = $("div"); myDiv.clearQueue(); myDiv.stop(); });
.fadeTo()
調(diào)整匹配元素的透明度。
透明度的值為:0~1
$(this).fadeTo("fast", Math.random());
以上就是jQuery編程動(dòng)畫(huà)的基本方法示例詳解的詳細(xì)內(nèi)容,更多關(guān)于jQuery編程動(dòng)畫(huà)方法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- jQuery實(shí)現(xiàn)小球點(diǎn)擊發(fā)射動(dòng)畫(huà)
- 一篇文章帶你了解jQuery動(dòng)畫(huà)
- JQuery實(shí)現(xiàn)隱藏和顯示動(dòng)畫(huà)效果
- jQuery實(shí)現(xiàn)帶展開(kāi)動(dòng)畫(huà)的導(dǎo)航欄效果
- jQuery實(shí)現(xiàn)廣告顯示和隱藏動(dòng)畫(huà)
- jQuery框架實(shí)現(xiàn)元素顯示及隱藏三種動(dòng)畫(huà)方式
- jQuery實(shí)現(xiàn)移動(dòng)端下拉展現(xiàn)新的內(nèi)容回彈動(dòng)畫(huà)
- jQuery常見(jiàn)動(dòng)畫(huà)效果實(shí)現(xiàn)介紹
相關(guān)文章
基于jQuery實(shí)現(xiàn)音樂(lè)播放試聽(tīng)列表
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)音樂(lè)播放試聽(tīng)列表的相關(guān)資料,需要的朋友可以參考下2016-04-04『jQuery』.html(),.text()和.val()的概述及使用
如何使用jQuery中的.html(),.text()和.val()三種方法,用于讀取,修改元素的html結(jié)構(gòu),元素的文本內(nèi)容,以及表單元素的value值的方法2013-04-04JQuery UI的拖拽功能實(shí)現(xiàn)方法小結(jié)
JQuery UI是JQuery官方支持的WebUI 代碼庫(kù),包含底層交互、動(dòng)畫(huà)、特效等API,并且封裝了一些Web小部件(Widget)。同時(shí),JQuery UI繼承了jquery的插件支持,有大量的第三方插件可以豐富JQuery UI的功能2012-03-03jQuery+Ajax+PHP+Mysql實(shí)現(xiàn)分頁(yè)顯示數(shù)據(jù)實(shí)例講解
這是一個(gè)典型的Ajax應(yīng)用,在頁(yè)面上,您只需要點(diǎn)擊“下一頁(yè)”,數(shù)據(jù)區(qū)將自動(dòng)加載對(duì)應(yīng)頁(yè)碼的數(shù)據(jù),重新刷新數(shù)據(jù)區(qū)。類(lèi)似的效果在很多網(wǎng)站上應(yīng)用,尤其在一些需要展示大量圖片數(shù)據(jù)的網(wǎng)頁(yè)如淘寶商品列表頁(yè),Ajax分頁(yè)效果讓您的網(wǎng)站數(shù)據(jù)加載顯得非常流暢。2015-09-09jQuery插件FusionCharts繪制的3D雙柱狀圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的3D雙柱狀圖效果,涉及jQuery使用插件FusionCharts結(jié)合x(chóng)ml數(shù)據(jù)繪制的3D雙柱狀圖的相關(guān)操作技巧,需要的朋友可以參考下2017-04-04jQuery實(shí)現(xiàn)的簡(jiǎn)潔下拉菜單導(dǎo)航效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)潔下拉菜單導(dǎo)航效果代碼,通過(guò)簡(jiǎn)單的自定義函數(shù)實(shí)現(xiàn)頁(yè)面樣式切換功能,非常簡(jiǎn)潔實(shí)用,需要的朋友可以參考下2015-08-08jquery實(shí)現(xiàn)LED廣告牌旋轉(zhuǎn)系統(tǒng)圖片切換效果代碼分享
這篇文章主要介紹了jquery實(shí)現(xiàn)LED廣告牌旋轉(zhuǎn)系統(tǒng)圖片切換效果類(lèi)似路邊場(chǎng)景,很實(shí)用的代碼,推薦給大家,有需要的小伙伴可以參考下。2015-08-08Jquery解析Json格式數(shù)據(jù)過(guò)程代碼
Json是一種輕量級(jí)的數(shù)據(jù)交換格式,本節(jié)為大家介紹的是Jquery解析Json格式數(shù)據(jù)的過(guò)程,很詳細(xì),看看就知道了2014-10-10