本文是对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. PS改变图像颜色

    由于写的一个页面主色调变了,里面的一些图标颜色也要相应改变,自己难得重新去psd里面截图,就想着用ps,看能否直接能变换一下图标颜色.其实方法也很简单的. 1:用ps打开需要改变图标颜色的文件,然后选 ...

  2. android--Git上克隆项目遇到的坑

    直接上图,首先你得有你得GitHub项目地址,如下: 然后打开android studio,选择新建项目时从Git上克隆: 点击clone等待完成,新窗口打开. 打开之后可能.或许.大概.也许会出现下 ...

  3. Pig limit用法举例

    lmt = limit data 10;   只获取指定条数的数据,不能保证每次得到的结果一致,先执行order再limit可以保证一致.   输入数据全部载入.   会触发reduce阶段   a ...

  4. zabbix系列之八——安装后配置三Triggers

    1Triggers(触发器) 描述 详细 备注 术语描述 1)触发器是评估监控项采集的数据的逻辑表达式,代表了当前系统状态. 2)触发器可定义一个什么数据是可接受的阈值,因此,如果接收的数据超过了可接 ...

  5. apache url rewrite及正则表达式笔记

    什么是mod_rewrite? mod_rewrite是apache一个允许服务器端对请求url做修改的模块.入端url将和一系列的rule来比对.这些rule包含一个正则表达式以便检测每个特别的模式 ...

  6. 设置Office 365邮箱默认发送和接收邮件大小限制

    Office 365默认的 35MB 的邮件大小限制.Office 365 最大是支持 150MB 的邮件体积的. 我们只需用 Windows Powershell 连接 Office 365 ,然后 ...

  7. 模仿SDWebImage实现异步加载图片

    模仿SDWebImage实现异步加载图片 SDWebImage想必大家都不陌生吧,要实现它的图片异步加载功能这个还是很简单的. 注意:此处我只实现了异步加载图片,并没有将文件缓存到本地的打算哦:) 源 ...

  8. 最小生成数 克鲁斯卡尔 普里姆 matlab

    克鲁斯卡尔: function T=MST_Kruskal(G) n=0; if isfield(G,'w') && ~isempty(G.w) && size(G.w ...

  9. linux用户相关及/etc/passed,/etc/group,/etc/shadow

    useradd:新建用户 usermod:修改用户相关信息 userdel:删除用户分(-r选项) 组的操作与用户的操作类似 选项 userdel相关选项: -f:强制删除用户,即使用户已登录 -r: ...

  10. iPhone X进入DFU模式

    下面把iphoneX进dfu模式的方法分享给大家.在开机状态下,按一下音量加键后松开,然后按一下音量减键后松开,接着按住电源键,屏幕完全熄灭后,松开电源键,接着同时按住电源键和音量减,保持5秒左右,再 ...