本文是对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 Studio 快速实现上传项目到Github（详细步骤）

    前言: 本文主要讲解如何将Android Studio项目上传至GitHub,在此之前,先介绍几个概念. Android Studio:是谷歌推出一个Android集成开发工具,基于IntelliJ ...

  2. 监控SQLServer 数据库表每天的空间变化情况

    阅读完桦仔的<分享一个SQLSERVER脚本(计算数据库中各个表的数据量和每行记录所占用空间)>后,我想使用文中提供的代码做一个统计表每天的新增行数及新增存储空间的功能 实现步骤如下: 1 ...

  3. 审计系统---paramiko模块学习

    paramiko模块学习 [更多参考]http://www.cnblogs.com/wupeiqi/articles/4963027.html [paramiko的Demo实例]https://git ...

  4. 《编程题》穷举法求N年后有多少头牛

    若一头小母牛,从出生起第四个年头开始每年生一头母牛,按这个规律,第N年时有多少头母牛? #include <iostream> int main(int argc, const char ...

  5. Mysql--通俗易懂的左连接、右连接、内连接

    刚开始看书的时候花了好长时间理解 先通俗易懂的描述下: left join(左联接): 返回包括左表中的所有记录和右表中联结字段相等的记录. right join(右联接): 返回包括右表中的所有记录 ...

  6. 团队开发中，eclipse中安装jre

    团队合作中配置jre时,jre名称应该保持一致,否则不要提交.classpath文件 window-preferences     团队合作中,JRE name一定要一致!

  7. javascript Spline代码

    代码是通过网上一个winform代码中提取修改而来的.后转为javascript 版本. /* points = new Array(); points.push({x:1,y:2}); */ fun ...

  8. 3.5星|《硅谷产品》：Facebook网红社区产品经理经验谈

    硅谷产品:36讲直通世界级产品经理 作者是Facebook产品经理,目前负责的具体业务书的扉页上有含糊的介绍,书中没明确说,根据书中内容推测,主要是网红社区. 比较遗憾的是书中作者亲历的案例只有3个. ...

  9. MFC调试时可以，使用生产的exe时，显示未响应解决方案

    首先,使用release模式,生成解决方案和exe. 对生成的exe,选择属性,兼容性,win7,应用,即可解决. 此方法对debug无用

  10. lambda表达式和groovy闭包的区别

    groovy定义的闭包是 Closure 的实例,lambda表达式只是在特定的接⼝或者抽象类的匿名实现,他们之间最主要区别闭包可以灵活的配置代理策略⽽labmda表达式不允许