一篇文章帶你了解jQuery動畫
jQuery提供了一些默認(rèn)的動畫 控制元素的顯示與隱藏 show() hide() 控制元素的透明度 fadeIn() fadeOut() 控制元素的高度 slideUp() slideDown() 自定義動畫 animate()
1.控制元素的顯示與隱藏 show() hide()
語法:
$("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()
語法:
$("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()
使元素逐漸縮短直至隱藏
語法:
$("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é)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
jQuery Layer彈出層傳值到父頁面的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery Layer彈出層傳值到父頁面的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-08-08jQuery實(shí)現(xiàn)選中行變色效果(實(shí)例講解)
下面小編就為大家?guī)硪黄猨Query實(shí)現(xiàn)選中行變色效果(實(shí)例講解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07DIY jquery plugin - tabs標(biāo)簽切換實(shí)現(xiàn)代碼
接觸jquery 2,3個月了,一直都未動手寫過插件。正好最近比較閑,就打算把一直看不順眼的項(xiàng)目中現(xiàn)有的tab改造一番(現(xiàn)有的tab未能做成一個控件,copy,past的代碼太多)。2010-12-12juqery 學(xué)習(xí)之三 選擇器 可見性 元素屬性
juqery 學(xué)習(xí)之三 選擇器 可見性 元素屬性,需要的朋友可以參考下。2010-11-11jquery模擬picker實(shí)現(xiàn)滑動選擇效果
這篇文章主要為大家詳細(xì)介紹了jquery模擬picker實(shí)現(xiàn)滑動選擇效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-04-04