JQuery動畫之hide()和show()的使用講解二（程式碼範例）
- 不言轉載
- 2019-01-18 10:48:462485瀏覽
這篇文章帶給大家的內容是關於JQuery動畫之hide()和show()的使用講解二（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
本文是hide()和show()的進一步補充，其中不僅介紹回呼函數，還有遞歸的相關知識點。
案例要求：
#點擊」隱藏動畫「按鈕，四個頭像從後向前，每個以0.8秒的速度消失
點擊」顯示動畫「按鈕，四個頭像從前向後，每個以0.8秒的速度出現
#知識點：
#遞歸思想：arguments.callee
回呼函數：上節有敘述
實現想法（以點擊」隱藏動畫「為例）：
①取得所有的img，選取最後一個img
# $("p>img").last("img")
②讓最後一個img隱藏，並設定回呼函數
$("p>img").last(" img").hide(800,function(){ }
③回呼函數中，讓目前函數的上一個img隱藏，並設定遞迴參數
$(this).prev( ).hide(800,arguments.callee);
#程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
img{
width: 90px;
height: 90px;
float: left;
/* vertical-align: top; */
}
div{
width: 400px;
}
</style>
<script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
$("#hide").click(function(){
$("div>img").last("img").hide(800,function(){
//回调函数, arguments.callee相当于递归
$(this).prev().hide(800,arguments.callee);
})
});
$("#show").click(function(){
$("div>img").first("img").show(800,function(){
//回调函数
$(this).next().show(800,arguments.callee);
})
});
});
</script>
</head>
<body>
<input type="button" id="hide" value="隐藏动画" />
<input type="button" id="show" value="显示动画" />
<div >
<img src="images/1.jpg" >
<img src="images/2.jpg" >
<img src="images/3.jpg" >
<img src="images/4.jpg" >
</div>
</body>
</html>以上是JQuery動畫之hide()和show()的使用講解二（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：cnblogs.com。如有侵權，請聯絡admin@php.cn刪除