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. maven 插件jetty/tomcat启动 web 应用

    tomcat <plugin> <groupId>org.apache.tomcat.maven</groupId> <artifactId>tomca ...

  2. mysql 5.7数据库支持emoji符号但是程序总算报错Incorrect string value: '\xF0\x9F\x98\x84\xF0\x9F...' for column ...

    1.线上碰到个问题,端上切换搜狗输入法后,原来限制的表情符号还能输入.数据库使用的是5.7.22版本的,刚开始以为数据库不支持表情符号导致的,但是看了线上的数据库以及字段,都是支持的. show va ...

  3. LeetCode题解之Add two numbers

    1.题目描述 2.题目描述 题目思路可以参考合并单链表的思路,定义一个全局 进位标志,如果两个数值相加得到需要进位,则将进位标志置为1 . 3.代码 ListNode* addTwoNumbers(L ...

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

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

  5. [UI] 精美UI界面欣赏[8]

    精美UI界面欣赏[8]

  6. 通过runtime获取对象相关信息

    通过runtime获取对象相关信息 在这里,本人给大家提供一个runtime关于NSObject的扩展,用来显示各种NSObject中的信息,这有助于你来分析类的组成:) 先准备以下类供测试: Mod ...

  7. Go语言-windows安装配置篇

    Go-windows安装配置 前言 学习完了python基础,顺便也要提前学习一下go啦,抱着这样的心情,今晚尝试了安装一下go,很顺利的完成了,没有难度. 需要了解更多的关于Go的基本信息可以去维基 ...

  8. September 29th 2017 Week 39th Friday

    Human life is ephemera, which makes it precious. 生命短暂,所以珍贵. Don't waste time on praying to the God. ...

  9. Windows10自动更新之后，无线有线都连不上网

    大概浪费了我至少6个小时. 一个是无线网卡,这个后来可以修复,其实也不是网卡的原因.最主要的原因是 Realtek PCIe GBE Family Controller  这个驱动.只找到一个win1 ...

  10. Maven实战（十）利用 Nexus 来构建企业级 Maven 仓库

    目录 一.简介 Nexus是Maven仓库管理器,用来搭建一个本地仓库服务器,这样做的好处是便于管理,节省网络资源,速度快,还有一个非常有用的功能就是可以通过项目的SNAPSHOT版本管理,来进行模块 ...