本篇文章给大家带来的内容是关于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中文网其他相关文章!