本文是对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. 3.CSS使用基础(2)

    目录 一.CSS 链接 二.CSS 列表样式(ul) 三.CSS Table(表格) 四.盒子模型 五.CSS Border(边框) 六.CSS 轮廓(outline)属性 七.CSS Margin( ...

  2. HAproxy simple

    下载地址 start install: wget     http://www.haproxy.org/download/1.7/src/haproxy-1.7.5.tar.gz tar   -xf  ...

  3. ExpressRoute 路由要求

    若要使用 ExpressRoute 连接到 Azure 云服务,需要设置并管理路由.某些连接服务提供商以托管服务形式提供路由的设置和管理.请咨询连接服务提供商,以确定他们是否提供此类服务.如果不提供, ...

  4. QuickBI助你成为分析师-数据建模（一）

    摘要: 数据集编辑功能界面介绍以及常见问题总结. 在数据集编辑界面可以进行数据建模来更好的展示数据,创建数据集默认将数值类型字段作为度量,日期.字符串等类型作为维度,度量可以根据维度分组展示.下面来介 ...

  5. Hadoop HBase概念学习系列之数据模型（七）

    HBase是一个类似BigTable的分布式数据库, 它是一个稀疏的长期存储的(存在硬盘上).多维度的.排序的映射表.这张表(HBase)的索引是行关键字.列关键字和时间戳.    HBase中的数据 ...

  6. Centos7 Nginx 443端口反向代理springboot项目

    开发微信小程序需要部署项目到服务器.要求必须是443端口.但是一个443端口只能监听一个服务器.所以就出现了一个问题就是每次开发一个小程序就需要买一个服务器.觉得特别多余.后来查到了有一种方式就是通过 ...

  7. scrapy爬虫框架之Xpath选择器

    问题: 本篇博文主要记录scrapy框架爬取伯乐在线文章的相关知识,在实践中学习对框架的理解.今天主要记录了xpath的相关用法以及语法规范. ----->>>点击进入爬取页面 一. ...

  8. Maven实战（十一）eclipse下载依赖jar包出问题

    问题描述 在pom.xml中配置了依赖,但是提示依赖不成功,或在本地仓库找不到相关依赖 大致错误如下: ArtifactDescriptorException: Failed to read arti ...

  9. js实现svg图形转存为图片下载[转]

    我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持.研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代 ...

  10. angular 生命周期钩子 ngOnInit() 和 ngAfterViewInit() 的区别

    angular 生命周期钩子的详细介绍在 https://angular.cn/guide/lifecycle-hooks  文档中做了介绍. ngOnInit() 在 Angular 第一次显示数据 ...