一篇文章帶你了解jQuery動(dòng)畫
jQuery提供了一些默認(rèn)的動(dòng)畫
控制元素的顯示與隱藏 show() hide()
控制元素的透明度 fadeIn() fadeOut()
控制元素的高度 slideUp() slideDown()
自定義動(dòng)畫 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)容！
- jQuery編程動(dòng)畫的基本方法示例詳解
- jQuery實(shí)現(xiàn)小球點(diǎn)擊發(fā)射動(dòng)畫
- JQuery實(shí)現(xiàn)隱藏和顯示動(dòng)畫效果
- jQuery實(shí)現(xiàn)帶展開動(dòng)畫的導(dǎo)航欄效果
- jQuery實(shí)現(xiàn)廣告顯示和隱藏動(dòng)畫
- jQuery框架實(shí)現(xiàn)元素顯示及隱藏三種動(dòng)畫方式
- jQuery實(shí)現(xiàn)移動(dòng)端下拉展現(xiàn)新的內(nèi)容回彈動(dòng)畫
- jQuery常見動(dòng)畫效果實(shí)現(xiàn)介紹
相關(guān)文章
$(function() {});是$(document).ready(function(){ })的簡(jiǎn)寫，最早接觸的時(shí)候也說$(document).ready(function(){ })這個(gè)函數(shù)是用來取代頁(yè)面中的window.onload;但是今天發(fā)現(xiàn) 好像不是這樣回事！是在做一個(gè)頁(yè)面載入效果時(shí)發(fā)現(xiàn)的！2015-08-08
這篇文章主要介紹了jQuery中ajax的load()方法用法,以實(shí)例形式較為詳細(xì)的分析了load()方法的功能、參數(shù)及使用技巧,是非常實(shí)用的技巧,需要的朋友可以參考下2014-12-12
本篇文章主要是對(duì)jquery cookie的用法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-11-11
jquery 圓形旋轉(zhuǎn)圖片滾動(dòng)切換效果
今回給大家介紹個(gè)圓形旋轉(zhuǎn)的效果，基于圓形的物理特性，又圓上任意一點(diǎn)可以作為一個(gè)控制按鈕，然后拖動(dòng)它來使圖片輪換。2011-01-01
jQuery Layer彈出層傳值到父頁(yè)面的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery Layer彈出層傳值到父頁(yè)面的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-08-08
jQuery實(shí)現(xiàn)選中行變色效果(實(shí)例講解)
下面小編就為大家?guī)硪黄猨Query實(shí)現(xiàn)選中行變色效果(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
DIY jquery plugin - tabs標(biāo)簽切換實(shí)現(xiàn)代碼
接觸jquery 2,3個(gè)月了，一直都未動(dòng)手寫過插件。正好最近比較閑，就打算把一直看不順眼的項(xiàng)目中現(xiàn)有的tab改造一番（現(xiàn)有的tab未能做成一個(gè)控件，copy,past的代碼太多）。2010-12-12
juqery 學(xué)習(xí)之三 選擇器 可見性 元素屬性
juqery 學(xué)習(xí)之三 選擇器 可見性 元素屬性，需要的朋友可以參考下。2010-11-11
jquery模擬picker實(shí)現(xiàn)滑動(dòng)選擇效果
這篇文章主要為大家詳細(xì)介紹了jquery模擬picker實(shí)現(xiàn)滑動(dòng)選擇效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
jQuery常見動(dòng)畫效果實(shí)現(xiàn)介紹
這篇文章主要為大家介紹了jQuery編程動(dòng)畫基本實(shí)現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10