本文是对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. windows如何查看nvidia显卡（GPU）的利用率和温度

    windows如何查看nvidia显卡(GPU)的利用率和温度 nvidia-smi 只要在文件夹C:\Program Files\NVIDIA Corporation\NVSMI里找到文件nvidi ...

  2. python的学习笔记之——time模块常用内置函数

    1.Python time time()方法 Python time time() 返回当前时间的时间戳(1970纪元后经过的浮点秒数). time()方法语法: time.time() 举例: #! ...

  3. node（4）express 框架 EJS模板，cookie, session的学习

    一.EJS 概述:前端咱们使用过的一个模板套路,是underscore的套路.接下来EJS它属于后台工程师人的模板. https://www.npmjs.com/package/ejs 官网地址 特点 ...

  4. C#代码实现在控制台输入密码显示星号

    在控制台输入的内容C#默认按照字符串进行处理,如果直接让用户一次输入完毕就很难实现 显示星号的功能.但是如果让用户一次只能输入一个字符就,在将用户输入的字符替换为星号就可以实现了! 首先,C#中能让用 ...

  5. LeetCode 题解之Add Two Numbers II

    1.题目描述 2.分析 首先将链表翻转,然后做加法. 最后将结果链表翻转. 3.代码 ListNode* addTwoNumbers(ListNode* l1, ListNode* l2) { Lis ...

  6. 树莓派raspberry Pi2 介绍

    Compared to the Raspberry Pi 1 it has: A 900MHz quad-core ARM Cortex-A7 CPU 1GB RAM Like the (Pi 1) ...

  7. MACOS root密码忘了怎么办?

    MAC中ROOT用户很少用到,有时又手贱,给设了密码,过一阵忘了密码,很尴尬

  8. MySQL存储引擎之Spider内核深度解析

      作者介绍 朱阅岸,中国人民大学博士,现供职于腾讯云数据库团队.研究方向主要为数据库系统理论与实现.新硬件平台下的数据库系统以及TP+AP型混合系统. Spider是为MySQL/MariaDB开发 ...

  9. 渐变显示渐变消失的BackgroundView

    渐变显示渐变消失的BackgroundView 效果如下: 源码: BackgroundView.h 与 BackgroundView.m // // BackgroundView.h // Test ...

  10. Win10下安装sulley

    sulley是一款针对网络协议的fuzz框架,记录下安装过程备忘 1.安装MinGW 下载:https://github.com/develersrl/gccwinbinaries/releases/ ...