一篇文章帶你了解jQuery動(dòng)畫(huà)
jQuery提供了一些默認(rèn)的動(dòng)畫(huà) 控制元素的顯示與隱藏 show() hide() 控制元素的透明度 fadeIn() fadeOut() 控制元素的高度 slideUp() slideDown() 自定義動(dòng)畫(huà) animate()
1.控制元素的顯示與隱藏 show() hide()
語(yǔ)法:
$("selector").show([speed],[callback]);
參考描述:
參數(shù)一:速度,可選 例如:1000毫秒等等與1秒 fast slow normal
參數(shù)二:回調(diào)函數(shù),可選 show或hide函數(shù)執(zhí)行完之后,要實(shí)行的函數(shù)
$(function () { $(".nav-ul li").on({"mouseover":function () { $(this).css("background","pink") },"mouseout":function () { $(this).css("background","#ff2832") }}); $(".menu-btn").hover(function () { $(this).next().show("fast") },function () { $(this).next().hide("slow") }) })
2.控制元素的透明度 fadeIn() fadeOut()
語(yǔ)法:
$("selector").fadeIn([speed],[callback]); $("selector").fadeOut([speed],[callback]);
參考描述:
參數(shù)一:速度,可選 默認(rèn)是0 例如:1000毫秒等等與1秒 fast slow normal
參數(shù)二:回調(diào)函數(shù),可選 fadeIn或fadeOut執(zhí)行完以后函數(shù)執(zhí)行完之后,要實(shí)行的函數(shù)
$(function () { $("input[name='fadein_btn']").click(function () { $("img:eq(0)").fadeIn(500,function () { alert("淡入成功") }) }) $("input[name='fadeout_btn']").click(function () { $("img:eq(0)").fadeOut(1000,function () { alert("淡出成功") }) }) })
3:控制元素的高度 slideUp() slideDown()
slideDown()
使元素逐漸延伸顯示
slideUp()
使元素逐漸縮短直至隱藏
語(yǔ)法:
$("selector").slideUp([speed],[callback]); $("selector").slideDown([speed],[callback]);
參考描述:
參數(shù)一:速度,可選 默認(rèn)是0 例如:1000毫秒等等與1秒 fast slow normal
參數(shù)二:回調(diào)函數(shù),可選 slideUp或slideDown執(zhí)行完以后函數(shù)執(zhí)行完之后,要實(shí)行的函數(shù)
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
- jQuery編程動(dòng)畫(huà)的基本方法示例詳解
- jQuery實(shí)現(xiàn)小球點(diǎn)擊發(fā)射動(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中$(function() {});問(wèn)題詳解
$(function() {});是$(document).ready(function(){ })的簡(jiǎn)寫(xiě),最早接觸的時(shí)候也說(shuō)$(document).ready(function(){ })這個(gè)函數(shù)是用來(lái)取代頁(yè)面中的window.onload;但是今天發(fā)現(xiàn) 好像不是這樣回事!是在做一個(gè)頁(yè)面載入效果時(shí)發(fā)現(xiàn)的!2015-08-08jquery 圓形旋轉(zhuǎn)圖片滾動(dòng)切換效果
今回給大家介紹個(gè)圓形旋轉(zhuǎn)的效果,基于圓形的物理特性,又圓上任意一點(diǎn)可以作為一個(gè)控制按鈕,然后拖動(dòng)它來(lái)使圖片輪換。2011-01-01jQuery Layer彈出層傳值到父頁(yè)面的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery Layer彈出層傳值到父頁(yè)面的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-08-08jQuery實(shí)現(xiàn)選中行變色效果(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇jQuery實(shí)現(xiàn)選中行變色效果(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07DIY jquery plugin - tabs標(biāo)簽切換實(shí)現(xiàn)代碼
接觸jquery 2,3個(gè)月了,一直都未動(dòng)手寫(xiě)過(guò)插件。正好最近比較閑,就打算把一直看不順眼的項(xiàng)目中現(xiàn)有的tab改造一番(現(xiàn)有的tab未能做成一個(gè)控件,copy,past的代碼太多)。2010-12-12juqery 學(xué)習(xí)之三 選擇器 可見(jiàn)性 元素屬性
juqery 學(xué)習(xí)之三 選擇器 可見(jiàn)性 元素屬性,需要的朋友可以參考下。2010-11-11jquery模擬picker實(shí)現(xiàn)滑動(dòng)選擇效果
這篇文章主要為大家詳細(xì)介紹了jquery模擬picker實(shí)現(xiàn)滑動(dòng)選擇效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04jQuery常見(jiàn)動(dòng)畫(huà)效果實(shí)現(xiàn)介紹
這篇文章主要為大家介紹了jQuery編程動(dòng)畫(huà)基本實(shí)現(xiàn)方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10