代码学习:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nearth</title> <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> div{ width:400px; } img{ width:90px; height:90px; vertical-align: top; } </style> <!-- <script type="text/javascript"> //要求:点击按钮1,图片全部隐藏,点击按钮2,图片全部出现 $(function(){ $("#btn1").click(function(){ $("div>img").hide(1000,function(){ alert("结束了"); }); }); $("#btn2").click(function(){ $("div>img").show(1000,function(){ alert("结束了==="); }); }); }); </script> --> <script type="text/javascript"> $(function(){ //隐藏 $("#btn1").click(function(){ $("div>img").last("img").hide(1000,function(){ //arguments.callee相当于递归,不断的(一张张的)隐藏图片,而不是点击按钮,图片全部隐藏 $(this).prev().hide(1000,arguments.callee); }); }); //显示 $("#btn2").click(function(){ $("div>img").first("img").show(1000,function(){ $(this).next().show(1000,arguments.callee); }); }); }); </script> </head> <body> <h1>隐藏动画案例</h1> <hr > <input type="button" name="" id="btn1" value="隐藏动画" /> <input type="button" name="" id="btn2" value="显示动画" /> <hr > <div> <img src="1.jpg" > <img src="2.jpg" > <img src="3.jpg" > <img src="4.jpg" > </div> </body> </html>
Nearth===>WEB前端--第23课/JQuery/动画隐藏案列3(递归函数:arguments.callee的使用)
最新推荐文章于 2019-11-16 17:30:09 发布