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. Visualizing CNN Layer in Keras

    CNN 权重可视化 How convolutional neural networks see the world An exploration of convnet filters with Ker ...

  2. idapython 开发

    调试方法 使用 pydevd 然后在需要调试处加入调试代码 GetOperandValue 作用 参数1: ea 虚拟地址 参数2: 操作数号 返回指令的操作数的被解析过的值 文档 def GetOp ...

  3. protobuf 源代码分析 (1)准备工作

    protobuf简介 protobuf是google开源的跨平台的一种数据序列化的代码自动生成器,支持c++.java和python语言,支持跨网络的传输数据,与平台类型无关.并且其生产的序列化数据具 ...

  4. Pycharm Html CSS JS 快捷方式创建元素

    div#div1>ol>li.id*4 tab键 <div id="div1"> <ol> <li id="id"&g ...

  5. SQLSERVER性能计数器的简单剖析

    SQLSERVER性能计数器的简单剖析 今晚看了这篇文章:SQL Server 2012新performance counter:非常实用的Batch Resp Statistics 文章里介绍到SQ ...

  6. Coroutine及其实现

    线程是内核对外提供的服务,应用程序可以通过系统调用让内核启动线程,由内核来负责线程调度和切换.线程在等待IO操作时线程变为unrunnable状态会触发上下文切换.现代操作系统一般都采用抢占式调度,上 ...

  7. SQL Server配置数据库邮件

    需求描述 在生产环境中,大部分情况下需要有自己的运维体制,包括自己健康状态的检测等.如果发生异常,需要提前预警的,可以以发邮件告知,邮件作为一种非常便利的预警实现方式,在及时性和易用性方面也有着不可替 ...

  8. 【 PostgreSQL】后台周期执行函数实例（shell+crontab）

    工作中常见函数后台周期执行的情况,Oracle有job实现,gp数据库可以通过shell+crontab实现.流程如下: gpadmin用户下创建函数sh脚本. 将sh挂在crontab任务上 ### ...

  9. Oracle案例13—— OGG-01163 Oracle GoldenGate Delivery for Oracle, reprpt01.prm

    由于虚拟机宿主机重启,导致很多虚拟机服务需要重点关注,其中一个DG的从库和另一个report库有OGG同步,所以这里再系统恢复后检查OGG状态的时候,果然目标端的REPLICAT进程处于abend状态 ...

  10. 使用Charles进行网络请求抓包解析

    使用Charles进行网络请求抓包解析 0. 懒人的福音(⌐■_■)(破解版下载地址,记得安装java库支持) http://pan.baidu.com/s/1c08ksMW 1. 查看电脑的ip地址 ...