欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jQuery----JQuery动画（hide()和show()）（下）

程序员文章站 2022-05-30 14:57:56
本文是对hide()和show()的进一步补充，其中不仅介绍回调函数，还有递归的相关知识点。 案例要求： 点击”隐藏动画“按钮，四个头像从后向前，每个以0.8秒的速度消失 点击”显示动画“按钮，四个头像从前向后，每个以0.8秒的速度出现 知识点： 递归思想：arguments.callee 回调函数 ......

本文是对hide()和show()的进一步补充，其中不仅介绍回调函数，还有递归的相关知识点。

案例要求：

jQuery----JQuery动画（hide()和show()）（下）

点击”隐藏动画“按钮，四个头像从后向前，每个以0.8秒的速度消失

点击”显示动画“按钮，四个头像从前向后，每个以0.8秒的速度出现

 

知识点：

递归思想：arguments.callee

回调函数：上节有叙述

 

实现思路（以点击”隐藏动画“为例）：

①获取所有的img，选中最后一个img   

$("div>img").last("img")

②让最后一个img隐藏，并设置回调函数

$("div>img").last("img").hide(800,function(){ }

③回调函数中，让当前函数的上一个img隐藏，并设置递归参数

$(this).prev().hide(800,arguments.callee);

 

代码如下：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>title</title>
 6     <style type="text/css">
 7         img{
 8             width: 90px;
 9             height: 90px;
10             float: left;
11             /* vertical-align: top; */
12         }
13         div{
14             width: 400px;
15         }
16     </style>
17     <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
18     <script>
19         $(function(){
20             $("#hide").click(function(){
21                 $("div>img").last("img").hide(800,function(){
22                     //回调函数,  arguments.callee相当于递归
23                     $(this).prev().hide(800,arguments.callee);
24                 })
25             });
26             
27             $("#show").click(function(){
28                 $("div>img").first("img").show(800,function(){
29                     //回调函数
30                     $(this).next().show(800,arguments.callee);
31                 })
32             });
33         });
34     </script>
35 </head>
36 <body>
37     <input type="button" id="hide" value="隐藏动画" />
38     <input type="button" id="show" value="显示动画" />
39     <div >
40         <img src="images/1.jpg" >
41         <img src="images/2.jpg" >
42         <img src="images/3.jpg" >
43         <img src="images/4.jpg" >
44     </div>
45 </body>
46 </html>

 

上一篇： 社交电商发展下诞生的每日一淘，正在成为创业者的新风口?

下一篇： 创业公司死得这么多 创业者如何避免成为下一个？

推荐阅读