本文是对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);

代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <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="data:images/1.jpg" >

         <img src="data:images/2.jpg" >

         <img src="data:images/3.jpg" >

         <img src="data:images/4.jpg" >

     </div>

 </body>

 </html>

jQuery----JQuery动画（hide()和show()）（下）的更多相关文章

  1. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  2. 美轮美奂！9款设计独特的jQuery/CSS3全新应用插件（下拉菜单、动画、图表、导航等）

    今天要为大家分享9款设计非常独特的jQuery/CSS3全新应用插件,插件包含菜单.jQuery焦点图.jQuery表单.jQuery图片特效等.下面大家一起来看看吧. 1.jQuery水晶样式下拉导 ...

  3. jQuery的动画处理总结

    最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用 ...

  4. JQuery: JQuery效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）

    JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...

  5. jquery的show/hide性能测试

    这篇文章是jQuery各种 show/hide方式的性能测试.作者之所以测试这个源于Robert Duffy在SanFrancisco举行的jQuery大会上的一句话:“.hide()和.show() ...

  6. jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining

    一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...

  7. 锋利的jQuery读书笔记---jQuery中动画

    jQuery中的动画: 1.show和hide 2.fadeIn和fadeOut 3.slideUp和slideDown <!DOCTYPE html> <html> < ...

  8. jQuery之动画效果show()......animate()

    jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...

  9. jQuery 效果- 动画

    jQuery animate() 方法允许您创建自定义的动画. jQuery 动画实例 jQuery jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自 ...

  10. jQuery animate()动画效果

    1.jQuery动画效果 jQuery animate()方法用于创建自定义动画 $(selector).animate({params},speed,callback); //必需的 params ...

随机推荐

  1. Android应用程序启动过程（二）分析

    本文依据Android6.0源码,从点击Launcher图标,直至解析到MainActivity#OnCreate()被调用. Launcher简析 Launcher也是个应用程序,不过是个特殊的应用 ...

  2. oracle exp dmp

    exp help=yconn scott/tiger;select * from tab;create table student(sno int, sname varchar2(10), sage ...

  3. java 对象

      对象可以看成是静态属性和动态属性的封装体.静态属性——成员变量:动态属性——方法. 1.汇编语言是对机器语言的抽象. 2.面向过程的语言是对汇编语言的抽象.属性和方法分离,不是封装在一起的,复用性 ...

  4. 你写的什么垃圾代码让Vsync命令不能及时处理呢？（2）

    接上篇 1.TraceView Traceview看起来复杂,其实很简单: 上部分图中,X代表时间消耗,Y轴代表各个线程中的方法,且使用了不同颜色表示.面积越款,时间越长. 下部分为分析面板,分析面板 ...

  5. Django之环境搭建

    安装django pip install django 安装完django之后就有了可用的管理工具django-admin.py,我们可以用它来创建我们的项目. django-admin的语法: dj ...

  6. cent7中kickstart

    一.基本环境 操作系统:CentOS7.4 内核版本:3.10.0-862.11.6.el7.x86_64 二.组件部署 yum安装tftp tftpd-server xinetd http dhcp ...

  7. 关于Entity Framework更新的几种方式以及可能遇到的问题（附加类型“Model”的实体失败，因为相同类型的其他实体已具有相同的主键值）在使用 "Attach" 方法或者将实体的状态设置为 "Unchanged" 或 "Modified" 时如果图形中的任何实体具有冲突键值，则可能会发生上述行为

    在日常使用Entity Framework中,数据更新通常会用到.下面就简单封装了一个DBContext类 public partial class EFContext<T> : DbCo ...

  8. systemd 之 systemctl

    Systemd 常规操作与彩蛋 一.前言 上了俩个月的RHCE工程师的班,收获颇多.话说回来,在 redhat 7 中有个非常重要的概念,即:systemd systemd 是 Linux 下的一款系 ...

  9. [C++] 用Xcode来写C++程序[4] 函数

    用Xcode来写C++程序[4] 函数 此节包括引用函数,内联函数,防止修改函数入参,函数自身带有默认值. 引用函数:防止复制对象,减少系统开销 内联函数:编译的时候根据具体情形将代码嵌入进去,成不成 ...

  10. 更改SQL实例端口

    为SQL Server使用非标准的端口 你正在使用标准的端口号1433来连接SQL Server 2005吗?你考虑过设置SQL Server来监听一个不同于1433的端口号吗?我曾经就是这样.在这篇 ...