hide()和show()方法，可以设置动画效果，本文对这两种方法效果加以说明。

hide(参数1，参数2)：

参数1：时间，单位为毫秒，表示对象隐藏所用的时间

参数2：回调函数，该函数在对象隐藏后触发。

show(参数1，参数2)：

参数1：同上

参数2：同上

示例：

需求说明：点击一个图片，该图片缓缓隐藏，隐藏后从页面删除，后一张图片补充前一张图片的位置

代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         img{

             width: 100px;

             height: 80px;

         }

         #pics div{

             float: left;

             margin: 2px;

             width: 100px;

             height: 80px;

         }

     </style>

     <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>

     <script>

         $(function(){

             //获取所有的图片,并注册点击事件

             $("#pics>div").click(function(){

                 $(this).hide(800,function(){
//回调函数，清除当前点击的元素

                     $(this).remove();//方法移除当前调用这个方法的元素---自杀

                 });

             });

         });

     </script>

 </head>

 <body>

     <div id="pics">

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

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

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

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

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

     </div>

 </body>

 </html>

备注：

 $(this).remove();//方法移除当前调用这个方法的元素---自杀

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

  1. jQuery动画高级用法（上）——详解animation中的.queue()动画队列插队函数

    决定对animate方面做一些总结,希望能给大家一些启发和帮助 从一个实际应用谈起 今天不谈animate().fadeIn().fadeOut().slideUp().show().hide()诸如 ...

  2. 关于jquery所有动画都有速度和动画的方向(在宽度方向上的动画)?

    不只是jquery的 animate 动画, 才有时间的 参数, 实际上, 在所有的动画中, 包括: show/hide/toggle, slideup/slidedown/slidetoggle, ...

  3. jQuery动画高级用法（上）——详解animation中的.queue()函数

    如果你拿着一个疑问去找专业人士寻找答案,那么你的一个疑问会变成三个,因为他会用另外两个令你更加一头雾水的名词来解释你的这个疑问. 我想这是大多数,包括我在内,IT人在学习过程中碰到的最大问题.当你有一 ...

  4. jQuery的动画处理总结

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

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

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

  6. jQuery Easing动画效果扩展（转）

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  7. jquery的show/hide性能测试

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

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

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

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

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

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

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

随机推荐

  1. SSRF学习

    前言 SSRF(Server-Side Request Forgery ,服务器端请求伪造) 是一种由攻击者构造形成由服务器发起请求的一个安全漏洞 SSRF的主要攻击目标为外网无法访问的内部系统. 本 ...

  2. 实现serializable接口的作用

    最重要的两个原因是: 1.将对象的状态保存在存储媒体中以便可以在以后重新创建出完全相同的副本: 2.按值将对象从一个应用程序域发送至另一个应用程序域. 实现serializable接口的作用是就是可以 ...

  3. Python 执行主程序

    主程序里的代码包含的东西比较多, 如果在程序的.py文件里执行还要再调一遍方法, 但通常这个调用在测试完结后是要删掉的. 那么问题来了, 如果把这个代码直接发给别人, 执行时要再加上调用, 这个就很烦 ...

  4. Oracle EBS 更新客户地点

    --更新客户地点 declare x_return_status ); x_msg_count NUMBER; x_msg_data ); x_profile_id NUMBER; l_locatio ...

  5. 第四章 数据更新 4-1 数据的插入（INSERT 语句的使用方法）

    一.什么是INSERT 用来插入数据的SQL就是INSERT语句.   二.INSERT 语句的基本语法. 列清单 值清单 列清单和值清单的列数必须保持一致,如果不一致会出错.   原则上,执行一次I ...

  6. 从一个简单的 JPA 示例开始

    本文主要讲述 Spring Data JPA,但是为了不至于给 JPA 和 Spring 的初学者造成较大的学习曲线,我们首先从 JPA 开始,简单介绍一个 JPA 示例:接着重构该示例,并引入 Sp ...

  7. ELK搭建实时日志分析平台之二Logstash和Kibana搭建

    本文书接前回<ELK搭建实时日志分析平台之一ElasticSearch> 文:铁乐与猫 四.安装Logstash logstash是一个数据分析软件,主要目的是分析log日志. 1)下载和 ...

  8. 实践和感悟 - scala向下转型和减少穷举

    工作中的问题总结: 问题一:scala 之向下转型 引言:假如在复杂的业务逻辑中,变量的类型不能确认,只能给个接口类型,这样数据类型推导不会错误,但是后面要使用实现类的类型时,你却发现转不过来了? 对 ...

  9. 鼠标有但是U盘读取不出来怎么办

    我今天就遇到了这个问题,搞了半天最后下了一个驱动人生,查看里面的回答才解决 就是把里面通用串行总控制器设置为隐藏文件可读之后选择把灰色的都删除就好了.具体可以在驱动人生里搜U盘不识别,之后就4,5步即 ...

  10. mysql5.7.22的安装与配置（适用mysql5.7.20至mysql5.7.22版本）

    一.解压Mysql5.7.20安装包,刚解压是没有  data  这个文件夹的 二.配置mysql环境变量,创建MYSQL_HOME,然后在Path上添加%MYSQL_HOME%\bin; 三.配置m ...