jQuery動(dòng)畫與特效詳解
1.顯示和隱藏hide()和show()
對(duì)于動(dòng)畫來(lái)說(shuō)，顯示和隱藏是最基本的效果之一，本節(jié)簡(jiǎn)單介紹jQuery的顯示和隱藏。
<script type="text/javascript">
$(function() {
$("input:first").click(function() {
$("p").hide(); //隱藏
});
$("input:last").click(function() {
$("p").show(); //顯示
});
});
</script>
<input type="button" value="Hide">
<input type="button" value="Show">
<p>點(diǎn)擊按鈕，看看效果</p>
<div><em>本節(jié)主要降級(jí)和學(xué)習(xí)jQuery的自動(dòng)顯隱，漸入漸出、飛入飛出。自定義動(dòng)畫等。 1.顯示和隱藏hide()和show() 對(duì)于動(dòng)畫來(lái)說(shuō)，顯示和隱藏是最基本的效果之一，本節(jié)簡(jiǎn)單介紹jQuery的顯示和隱藏。</em>
</div>
以上是對(duì)hide()和show()函數(shù)的測(cè)試。
2.使用show()、hide()和toggle()方法
上個(gè)例子對(duì)show()和hide()方法做了簡(jiǎn)單介紹，其實(shí)這兩個(gè)方法可以接受參數(shù)控制顯隱藏過(guò)程。
語(yǔ)法如下
show(duration,[callback]);
hide(duration,[callback]);
其中，duration表示動(dòng)畫執(zhí)行時(shí)間的長(zhǎng)短，可以表示速度的字符串，包括slow,normal,fast.也可以是表示時(shí)間的整數(shù)(毫秒)。callback是可選的回調(diào)函數(shù)。在動(dòng)畫完成之后執(zhí)行。
<script type="text/javascript">
$(function() {
$("input:first").click(function() {
$("p").hide(300); //隱藏
});
$("input:last").click(function() {
$("p").show(500); //顯示
});
});
</script>
例子和第一個(gè)例子相同，只是對(duì)hide()和show()增加了時(shí)間參數(shù)。其實(shí)toogle()也可以加入事件參數(shù)。
2.使用fadeIn()和fadeOut()方式
對(duì)于動(dòng)畫效果顯隱，jQuery還提供了fadeIn()個(gè)fadeOut這兩個(gè)實(shí)用的方法，他們的動(dòng)畫效果類似褪色，語(yǔ)法與slow()和hide()完全相同。
fadeIn(duration, [callback]);
fadeOut(duration, [callback]);
例子
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
$("img").fadeOut(3000); //逐漸fadeOut
});
$("input:eq(1)").click(function() {
$("img").fadeIn(1000); //逐漸fadeIn
});
});
</script>
<img src="
<input type="button" value="Hide">
<input type="button" value="Show">
fadeTo()方法的使用。
fadeTo() 方法將被選元素的不透明度逐漸地改變?yōu)橹付ǖ闹怠?/p>
例子：
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
$("img").fadeOut(1000);
});
$("input:eq(1)").click(function() {
$("img").fadeIn(1000);
});
$("input:eq(2)").click(function() {
$("img").fadeTo(1000, 0.5);
});
$("input:eq(3)").click(function() {
$("img").fadeTo(1000, 0);
});
});
</script>
<p><img src="03.jpg"></p>
<input type="button" value="FadeOut">
<input type="button" value="FadeIn">
<input type="button" value="FadeTo 0.5">
<input type="button" value="FadeTo 0">
fadeOut相關(guān)參數(shù)
speed
可選。規(guī)定元素從當(dāng)前透明度到指定透明度的速度。
可能的值：
毫秒 （比如 1500）
"slow"
"normal"
"fast"
opacity 必需。規(guī)定要淡入或淡出的透明度。必須是介于 0.00 與 1.00 之間的數(shù)字。
callback
可選。fadeTo 函數(shù)執(zhí)行完之后，要執(zhí)行的函數(shù)。
如需學(xué)習(xí)更多有關(guān) callback 的內(nèi)容，請(qǐng)?jiān)L問(wèn)我們的 jQuery Callback 這一章。
除非設(shè)置了 speed 參數(shù)，否則不能設(shè)置該參數(shù)。
3.幻燈片slideUp和slideDown效果
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
$("div").add("img").slideUp(1000);
});
$("input:eq(1)").click(function() {
$("div").add("img").slideDown(1000);
});
$("input:eq(2)").click(function() {
$("div").add("img").hide(1000);
});
$("input:eq(3)").click(function() {
$("div").add("img").show(1000);
});
});
</script>
<input type="button" value="SlideUp">
<input type="button" value="SlideDown">
<input type="button" value="Hide">
<input type="button" value="Show"><br>
<div></div><img src="04.jpg">
前面提到了幾種動(dòng)畫效果，jQuery還提供了slideUp()和slideDown()來(lái)模擬PPT中的類似幻燈片拉簾效果，它與slow()和hide()完全相同。
以上代碼定義了一個(gè)div和一個(gè)img,用add方法組合在一起。
4.自定義動(dòng)畫
考慮到框架的通用性及代碼文件的大小，jQuery不能涵蓋所有的動(dòng)畫效果，但它提供了animate()方法，能夠使開發(fā)者自定義動(dòng)畫。本節(jié)主要通過(guò)介紹animate()方法的兩種形式及應(yīng)用。
animate()方法給開發(fā)者很大的空間。它一共有兩種形式。第一種形式比較常用。用法如下
animate(params,[duration],[easing],[callback])
其中params為希望進(jìn)行變幻的css屬性列表，以及希望變化到的最終值，duration為可選項(xiàng)，與show()/hide()的參數(shù)含義完全相同。easing為可選參數(shù)，通常供動(dòng)畫插件使用。 用來(lái)控制節(jié)奏的變化過(guò)程。jQuery中只提供了linear和swing兩個(gè)值.callback為可選的回調(diào)函數(shù)。在動(dòng)畫完成后觸發(fā)。
需要注意。params中的變量遵循camel命名方式。例如paddingLeft不能寫成padding-left.另外，params只能是css中用數(shù)值表示的屬性。例如width.top.opacity等
像backgroundColor這樣的屬性不被animate支持。
<style>
div {
background-color: #FFFF00;
height: 40px;
width: 80px;
border: 1px solid #000000;
margin-top: 5px;
padding: 5px;
text-align: center;
}
</style>
<script type="text/javascript">
$(function() {
$("button").click(function() {
$("#block").animate({
opacity: "0.5",
width: "80%",
height: "100px",
borderWidth: "5px",
fontSize: "30px",
marginTop: "40px",
marginLeft: "20px"
}, 2000);
});
});
</script>
<button id="go">Go>></button>
<div id="block">動(dòng)畫！</div>
在params中，jQuery還可以用“+=”或者"-="來(lái)表示相對(duì)變化。如
<style>
div {
background-color: #FFFF00;
height: 40px;
width: 80px;
border: 1px solid #000000;
margin-top: 5px;
padding: 5px;
text-align: center;
position: absolute;
}
</style>
<script type="text/javascript">
$(function() {
$("button:first").click(function() {
$("#block").animate({
left: "-=80px" //相對(duì)左移
}, 300);
});
$("button:last").click(function() {
$("#block").animate({
left: "+=80px" //相對(duì)右移
}, 300);
});
});
</script>
<button >Go>></button>
<button >Go>></button>
<div id="block">動(dòng)畫！</div>
先將div進(jìn)行絕對(duì)定位，然后使用animate()中的-=和+=分別實(shí)現(xiàn)相對(duì)左移和相對(duì)右移。
animate()方法還有另外一種形式，如下所示：
animate(params,options)
其中，params與第一種形式完全相同，options為動(dòng)畫可選參數(shù)列表，主要包括duration,esaing，callback,queue等，其中duration.easing.callback與第一種形式完全一樣，queue為布爾值，表示當(dāng)有多個(gè) animate()組成jQuery時(shí)，當(dāng)前animate()緊接這下一個(gè)animate(),是按順序執(zhí)行(true)還是同時(shí)觸發(fā)false
如下例子，展示了animate()第二種用法。
<style>
div {
background-color: #FFFF22;
width: 100px;
text-align: center;
border: 2px solid #000000;
margin: 3px;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
}
input {
border: 1px solid #000033;
}
</style>
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
//第一個(gè)animate與第二個(gè)animate同時(shí)執(zhí)行，然后再執(zhí)行第三個(gè)
$("#block1").animate({
width: "90%"
}, {
queue: false,
duration: 1500
})
.animate({
fontSize: "24px"
}, 1000)
.animate({
borderRightWidth: "20px"
}, 1000);
});
$("input:eq(1)").click(function() {
//依次執(zhí)行三個(gè)animate
$("#block2").animate({
width: "90%"
}, 1500)
.animate({
fontSize: "24px"
}, 1000)
.animate({
borderRightWidth: "20px"
}, 1000);
});
$("input:eq(2)").click(function() {
$("input:eq(0)").click();
$("input:eq(1)").click();
});
$("input:eq(3)").click(function() {
//恢復(fù)默認(rèn)設(shè)置
$("div").css({
width: "",
fontSize: "",
borderWidth: ""
});
});
});
</script>
<input type="button" id="go1" value="Block1動(dòng)畫">
<input type="button" id="go2" value="Block2動(dòng)畫">
<input type="button" id="go3" value="同時(shí)動(dòng)畫">
<input type="button" id="go4" value="重置">
<div id="block1">Block1</div>
<div id="block2">Block2</div>
以上兩個(gè)div塊同時(shí)運(yùn)用了三個(gè)動(dòng)畫效果，其中第一個(gè)div快的第一個(gè)動(dòng)畫添加了queue:false參數(shù)，使得前兩項(xiàng)兩個(gè)動(dòng)畫同時(shí)執(zhí)行?？梢酝ㄟ^(guò)重置反復(fù)測(cè)試，熟悉animate()第二種形式。
以上就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
- 詳解jQuery停止動(dòng)畫——stop()方法的使用
- JQuery動(dòng)畫和停止動(dòng)畫實(shí)例代碼
- jQuery動(dòng)畫animate方法使用介紹
- jQuery動(dòng)畫效果animate和scrollTop結(jié)合使用實(shí)例
- jquery animate 動(dòng)畫效果使用說(shuō)明
- JQuery動(dòng)畫animate的stop方法使用詳解
- jQuery實(shí)現(xiàn)切換頁(yè)面過(guò)渡動(dòng)畫效果
- Jquery中使用show()與hide()方法動(dòng)畫顯示和隱藏圖片
- 利用jquery制作滾動(dòng)到指定位置觸發(fā)動(dòng)畫
- jQuery動(dòng)畫出現(xiàn)連續(xù)觸發(fā)、滯后反復(fù)執(zhí)行的解決方法
- jQuery 動(dòng)畫與停止動(dòng)畫效果實(shí)例詳解
相關(guān)文章
jQuery實(shí)現(xiàn)獲取及設(shè)置CSS樣式操作詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取及設(shè)置CSS樣式操作,結(jié)合實(shí)例形式分析了jQuery中常用的addClass()、removeClass()、toggleClass()及css()相關(guān)使用方法及操作注意事項(xiàng),需要的朋友可以參考下2018-09-09
Raphael一個(gè)用于在網(wǎng)頁(yè)中繪制矢量圖形的Javascript庫(kù)
Raphael是一個(gè)用于在網(wǎng)頁(yè)中繪制矢量圖形的Javascript庫(kù),它使用 SVG W3C 推薦標(biāo)準(zhǔn)和 VML 作為創(chuàng)建圖形的基礎(chǔ)，你可以通過(guò) JavaScript 操作 DOM 來(lái)輕松創(chuàng)建出各種復(fù)雜的柱狀圖、餅圖、曲線圖等各種圖表,接下來(lái)詳細(xì)介紹，感興趣的朋友可以了解下哦2013-01-01
jQuery實(shí)現(xiàn)用戶信息表格的添加和刪除功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)用戶信息表格的添加和刪除功能,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-09-09
基于jQuery和CSS3制作響應(yīng)式水平時(shí)間軸附源碼下載
我們經(jīng)?？吹接泻芏嗟拇怪睍r(shí)間軸用來(lái)記錄事件進(jìn)展，而有朋友問(wèn)我要求分享水平的時(shí)間軸，其實(shí)水平時(shí)間軸的難點(diǎn)在于自適應(yīng)屏幕尺寸。那么 今天我要給大家分享的是一款支持響應(yīng)式、支持觸屏手勢(shì)滑動(dòng)的水平時(shí)間軸2015-12-12
這篇文章主要介紹了jquery得到iframe src屬性值的方法，很簡(jiǎn)單，很實(shí)用,需要的朋友可以參考下2014-09-09
jQuery ajax中使用confirm,確認(rèn)是否刪除的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jQuery ajax 中使用confirm ,確認(rèn)是否刪除的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
jQuery為動(dòng)態(tài)生成的select元素添加事件的方法
下面小編就為大家?guī)?lái)一篇jQuery為動(dòng)態(tài)生成的select元素添加事件的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
jQuery ui1.7 dialog只能彈出一次問(wèn)題
之前對(duì)于刪除操作，一直使用的是頭兒寫的通用的“確認(rèn)刪除”的方法2009-08-08![jQuery中[attribute]選擇器用法實(shí)例](http://img.jbzj.com/images/xgimg/bcimg8.png)
jQuery中[attribute]選擇器用法實(shí)例
這篇文章主要介紹了jQuery中[attribute]選擇器用法,以實(shí)例形式分析了[attribute]選擇器的功能、定義及匹配給定元素屬性的技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
如果你的網(wǎng)站風(fēng)格適合，可以用這種方式來(lái)給頁(yè)面布局，支持任意尺寸的圖片滑動(dòng)、上下左右滑動(dòng),需要的朋友可以參考下2014-08-08