鋒利的jQuery 要點(diǎn)歸納（三） jQuery中的事件和動畫（下：動畫篇）
更新時間：2010年03月24日 17:07:20 作者：
《鋒利的jQuery》要點(diǎn)歸納（三） jQuery中的事件和動畫（下：動畫篇）
二、動畫
1 show()方法和hide()方法
$("selector").show()
從display:none還原元素默認(rèn)或已設(shè)置的display屬性
$("selector").hide()
設(shè)置元素的display樣式為none，等于$("selector").css("display","none")
（注：傳入?yún)?shù)后，.show()和.hide()方法同時動畫改變元素的width,height和透明屬性；傳入?yún)?shù)控制顯隱速度，單位毫秒，如.show(600)，也可傳入fast,normal,slow，fast為200毫秒，normal為400毫秒，slow為600毫秒）
2 fadeIn()方法和fadeOut()方法
$("selector").fadeIn()
控制透明度在指定時間內(nèi)從display:none提高至完全顯示
$("selector").fadeOut()
控制透明度在指定時間內(nèi)降低至display:none;
3 slideUp()方法和slideDown()方法
$("selector").slideUp()
控制元素高度在指定時間內(nèi)從下到上縮短至display:none;
$("selector").slideDown()
控制元素高度在指定時間內(nèi)從display:none延伸至完整高度
4 自定義動畫方法animate()
$("selector").animate(params,speed,callback);
params:一個包含樣式屬性及值的映射，比如{property1:"value1",property2:"value2",...}
speed:速度參數(shù)，可選
callback:在動畫完成時執(zhí)行的參數(shù)（即回調(diào)函數(shù)），可選
常見的動畫例子
<script>
//自定義動畫的例子
$(function(){
$("selector").click(function(){
$(this).animate({left:"500px"},3000); //selector在3秒內(nèi)向右移動500px
});
})
</script>
<script>
//累加、累減動畫的例子
$(function(){
$("selector").click(function(){
$(this).animate({left:"+=500px"},3000); //連續(xù)觸發(fā)click事件時，在當(dāng)前位置累加500px
});
})
</script>
<script>
//多重動畫的例子
$(function(){
$("selector").click(function(){
$(this).animate({left:"500px",top:"300px",height:"+=100px"},3000); //向右下30度方向運(yùn)動，同時增加高度
});
})
</script>
<script>
//按順序執(zhí)行多個動畫的例子
$(function(){
$("selector").click(function(){
$(this).animate({left:"500px"},3000).animate({top:"300px"},3000); //動畫隊列
});
})
</script>
5 動畫回調(diào)函數(shù)
因css()方法不會加入動畫隊列中，則會馬上執(zhí)行。如若要在動畫最后改變selector的css，需要利用回調(diào)函數(shù)
例：
<script>
$("selector").click(function(){
$(this).animate({property1:"value1"},time).animate({property2:"value2"},time,function(){
$(this).css("property3","value3"); //css()方法利用回調(diào)函數(shù)加入動畫隊列
});
})
</script>
（注：動畫回調(diào)函數(shù)適用于jQuery所有的動畫效果方法）
6 停止動畫和判斷是否處于動畫狀態(tài)
$("selector").stop()
結(jié)束當(dāng)前動畫，如隊列中存在下一個動畫則立即執(zhí)行下一個動畫，格式$("selector").stop([clearQueue][,gotoEnd])
切換動畫的例子：
<script>
$("selector").hover(function(){
$(this).stop().animate();
},function(){
$(this).stop().animate();
})
</script>
clearQueue參數(shù)設(shè)置為true時，將清空當(dāng)前元素接下來尚未執(zhí)行完的動畫隊列
例：
<script>
$("selector").hover(function(){
$(this).stop(true).animate().animate() //如此時觸發(fā)光標(biāo)移出事件，直接跳過后面的動畫隊列，避免執(zhí)行本隊列第二個動畫
},function(){
$(this).stop(true).animate().animate()
})
</script>
gotoEnd參數(shù)設(shè)置為true時，可將正在執(zhí)行的動畫直接到達(dá)結(jié)束時刻的狀態(tài)
is(":animated")
判斷元素是否處于動畫狀態(tài)，可用于防止動畫累積
例：
<script>
if(!$("selector").is(":animated")){ //判斷元素是否正處于動畫狀態(tài)
//如果當(dāng)前沒有進(jìn)行動畫，則添加新動畫
}
</script>
7 其他動畫方法
3個專門用于交互的動畫方法：toggle(speed,[callback]); slideToggle(speed,[callback]); fadeTo(speed,opacity,[callback])
$("selector").toggle()
切換元素的可見狀態(tài)，如元素隱藏則切換為可見，反之亦然
$("selector").slideToggle()
通過高度變化來切換元素的可見性
$("selector").fadeTo()
把元素的不透明度以漸進(jìn)方式調(diào)整到指定的值，如$("selector").fadeTo(600,0.2);以600毫秒速度將內(nèi)容調(diào)整到20%透明度
8 動畫方法概括
toggle()用來代替hide()和show()
slideToggle()用來代替slideUp()和slideDown()
animate()可代替所有動畫方法
1 show()方法和hide()方法
復(fù)制代碼 代碼如下:
$("selector").show()
從display:none還原元素默認(rèn)或已設(shè)置的display屬性
$("selector").hide()
設(shè)置元素的display樣式為none，等于$("selector").css("display","none")
（注：傳入?yún)?shù)后，.show()和.hide()方法同時動畫改變元素的width,height和透明屬性；傳入?yún)?shù)控制顯隱速度，單位毫秒，如.show(600)，也可傳入fast,normal,slow，fast為200毫秒，normal為400毫秒，slow為600毫秒）
2 fadeIn()方法和fadeOut()方法
復(fù)制代碼 代碼如下:
$("selector").fadeIn()
控制透明度在指定時間內(nèi)從display:none提高至完全顯示
$("selector").fadeOut()
控制透明度在指定時間內(nèi)降低至display:none;
3 slideUp()方法和slideDown()方法
復(fù)制代碼 代碼如下:
$("selector").slideUp()
控制元素高度在指定時間內(nèi)從下到上縮短至display:none;
$("selector").slideDown()
控制元素高度在指定時間內(nèi)從display:none延伸至完整高度
4 自定義動畫方法animate()
復(fù)制代碼 代碼如下:
$("selector").animate(params,speed,callback);
params:一個包含樣式屬性及值的映射，比如{property1:"value1",property2:"value2",...}
speed:速度參數(shù)，可選
callback:在動畫完成時執(zhí)行的參數(shù)（即回調(diào)函數(shù)），可選
常見的動畫例子
復(fù)制代碼 代碼如下:
<script>
//自定義動畫的例子
$(function(){
$("selector").click(function(){
$(this).animate({left:"500px"},3000); //selector在3秒內(nèi)向右移動500px
});
})
</script>
復(fù)制代碼 代碼如下:
<script>
//累加、累減動畫的例子
$(function(){
$("selector").click(function(){
$(this).animate({left:"+=500px"},3000); //連續(xù)觸發(fā)click事件時，在當(dāng)前位置累加500px
});
})
</script>
<script>
//多重動畫的例子
$(function(){
$("selector").click(function(){
$(this).animate({left:"500px",top:"300px",height:"+=100px"},3000); //向右下30度方向運(yùn)動，同時增加高度
});
})
</script>
<script>
//按順序執(zhí)行多個動畫的例子
$(function(){
$("selector").click(function(){
$(this).animate({left:"500px"},3000).animate({top:"300px"},3000); //動畫隊列
});
})
</script>
5 動畫回調(diào)函數(shù)
因css()方法不會加入動畫隊列中，則會馬上執(zhí)行。如若要在動畫最后改變selector的css，需要利用回調(diào)函數(shù)
例：
復(fù)制代碼 代碼如下:
<script>
$("selector").click(function(){
$(this).animate({property1:"value1"},time).animate({property2:"value2"},time,function(){
$(this).css("property3","value3"); //css()方法利用回調(diào)函數(shù)加入動畫隊列
});
})
</script>
（注：動畫回調(diào)函數(shù)適用于jQuery所有的動畫效果方法）
6 停止動畫和判斷是否處于動畫狀態(tài)
$("selector").stop()
結(jié)束當(dāng)前動畫，如隊列中存在下一個動畫則立即執(zhí)行下一個動畫，格式$("selector").stop([clearQueue][,gotoEnd])
切換動畫的例子：
復(fù)制代碼 代碼如下:
<script>
$("selector").hover(function(){
$(this).stop().animate();
},function(){
$(this).stop().animate();
})
</script>
clearQueue參數(shù)設(shè)置為true時，將清空當(dāng)前元素接下來尚未執(zhí)行完的動畫隊列
例：
復(fù)制代碼 代碼如下:
<script>
$("selector").hover(function(){
$(this).stop(true).animate().animate() //如此時觸發(fā)光標(biāo)移出事件，直接跳過后面的動畫隊列，避免執(zhí)行本隊列第二個動畫
},function(){
$(this).stop(true).animate().animate()
})
</script>
gotoEnd參數(shù)設(shè)置為true時，可將正在執(zhí)行的動畫直接到達(dá)結(jié)束時刻的狀態(tài)
is(":animated")
判斷元素是否處于動畫狀態(tài)，可用于防止動畫累積
例：
復(fù)制代碼 代碼如下:
<script>
if(!$("selector").is(":animated")){ //判斷元素是否正處于動畫狀態(tài)
//如果當(dāng)前沒有進(jìn)行動畫，則添加新動畫
}
</script>
7 其他動畫方法
3個專門用于交互的動畫方法：toggle(speed,[callback]); slideToggle(speed,[callback]); fadeTo(speed,opacity,[callback])
復(fù)制代碼 代碼如下:
$("selector").toggle()
切換元素的可見狀態(tài)，如元素隱藏則切換為可見，反之亦然
$("selector").slideToggle()
通過高度變化來切換元素的可見性
$("selector").fadeTo()
把元素的不透明度以漸進(jìn)方式調(diào)整到指定的值，如$("selector").fadeTo(600,0.2);以600毫秒速度將內(nèi)容調(diào)整到20%透明度
8 動畫方法概括
復(fù)制代碼 代碼如下:
toggle()用來代替hide()和show()
slideToggle()用來代替slideUp()和slideDown()
animate()可代替所有動畫方法
相關(guān)文章
jquery pagination插件實現(xiàn)無刷新分頁代碼
首先，我們要準(zhǔn)備的文件有jquery.js,jquery.pagination.js,pagination.css,還有一個就是經(jīng)常用的table布局的css文件。這些文件都會在后面的文件中包含。2009-10-10
這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)全選、不選、反選的兩種方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了jQuery+ajax讀取并解析XML文件的方法,涉及jQuery的ajax方法調(diào)用xml文件及針對xml數(shù)據(jù)的遍歷與節(jié)點(diǎn)操作相關(guān)技巧,需要的朋友可以參考下2016-09-09
下面小編就為大家?guī)硪黄猨q給頁面添加覆蓋層遮罩的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
頁面分頁對于程序員來說最熟悉不過，在WEB開發(fā)中經(jīng)常需要對頁面進(jìn)行分頁，jQuery插件JQuery Pager分頁器能輕松實現(xiàn)javascript分頁功能，只需要幾行代碼，javascript分頁簡單搞定。2010-07-07
本文使用jquery.form.js解決提交之后，頁面發(fā)生跳轉(zhuǎn)，在一個空白頁面上顯示了后端返回的json數(shù)據(jù)問題，需要的朋友參考下2017-06-06
jQuery中animate動畫第二次點(diǎn)擊事件沒反應(yīng)
這篇文章主要介紹了jQuery中animate動畫第二次點(diǎn)擊事件沒反應(yīng)的解決方法，非常的實用，有需要的小伙伴可以參考下2015-05-05
這篇文章主要為大家詳細(xì)介紹了五個步驟輕松實現(xiàn)zTree的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
使用jQuery的ajax方法向服務(wù)器發(fā)出get和post請求的方法
這篇文章主要介紹了使用jQuery的ajax方法向服務(wù)器發(fā)出get和post請求的方法,需要的朋友可以參考下2017-01-01
15款優(yōu)秀的jQuery導(dǎo)航菜單插件分享
這篇文章收集了15款優(yōu)秀的jQuery導(dǎo)航菜單插件分享給大家。jQuery 是一個非常優(yōu)秀的 JavaScript 框架，使用簡單靈活，同時還有許多成熟的插件可供選擇，jQuery 讓網(wǎng)站有更好的可用性和用戶體驗，給訪問者對網(wǎng)站留下非常好的印象。2011-07-07