jQuery----JQuery动画（hide()和show()）（上）
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()）（上）的更多相关文章
- jQuery动画高级用法（上）——详解animation中的.queue()动画队列插队函数
决定对animate方面做一些总结,希望能给大家一些启发和帮助 从一个实际应用谈起 今天不谈animate().fadeIn().fadeOut().slideUp().show().hide()诸如 ...
- 关于jquery所有动画都有速度和动画的方向(在宽度方向上的动画)?
不只是jquery的 animate 动画, 才有时间的 参数, 实际上, 在所有的动画中, 包括: show/hide/toggle, slideup/slidedown/slidetoggle, ...
- jQuery动画高级用法（上）——详解animation中的.queue()函数
如果你拿着一个疑问去找专业人士寻找答案,那么你的一个疑问会变成三个,因为他会用另外两个令你更加一头雾水的名词来解释你的这个疑问. 我想这是大多数,包括我在内,IT人在学习过程中碰到的最大问题.当你有一 ...
- jQuery的动画处理总结
最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用 ...
- JQuery: JQuery效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）
JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...
- jQuery Easing动画效果扩展（转）
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
- jquery的show/hide性能测试
这篇文章是jQuery各种 show/hide方式的性能测试.作者之所以测试这个源于Robert Duffy在SanFrancisco举行的jQuery大会上的一句话:“.hide()和.show() ...
- jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining
一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...
- 锋利的jQuery读书笔记---jQuery中动画
jQuery中的动画: 1.show和hide 2.fadeIn和fadeOut 3.slideUp和slideDown <!DOCTYPE html> <html> < ...
- jQuery之动画效果show()......animate()
jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...
随机推荐
- MIPS rop gadgets记录贴&&持续更新
前言 本帖记录一些常用的,效果好的 rop gadgets. uClibc 从栈中设置$t9 并跳到 $t9 的gadgets , __thread_start 函数第二行 使用 案例 使用tips: ...
- 记录下使用iis7代理node.js写的网站程序
昨天晚上一个学弟的紧急求救,说了自己接的单子做了一个网站,使用了自己熟悉的技术——node.js+mongdb,但当看到部署环境惊呆了,是 windows+sqlserver.这些都不是关键,关键是服 ...
- 关于nicescroll滚动条现在浏览器上滚动问题
nativeparentscrolling: false //检测内容底部,并让父节点来滚动,作为原生滚动 有时候 当自定义滚动条在底部 滚动无效 可以把这个参数设置一下
- rest framework 的权限管理
下面是对单个的视图进行的设置的: 请求的时候用postman然后发送信息 我们下面所有的举例都是在用户对Comment这个表的操作 首先先生成一个类似于cookie的字符串 发送给前端浏览器 然后下次 ...
- PHP 实现单点登录
1.准备两个虚拟域名 127.0.0.1 www.openpoor.com 127.0.0.1 www.myspace.com 2.在openpoor的根目录下创建以下文件 index.PHP [ ...
- if 条件为假(不成立),对应的语句块不会执行. 然后往下走
if 的条件为真,则执行语句块. 如果条件不真,则执行后面的语句块, 即 : if False: print("卡卡卡") # 前面的if条件是False,提示"un ...
- 破解myeclipse10失败的一个奇葩原因
昨天开发用的myeclipse10突然弹窗提示我要激活,我清楚的记得安装时候已经破解并且看到激活信息了. 翻遍搜索出来的文章,改systemid之类的也试过了,问题依旧存在,很是绝望. 今早过来机灵了 ...
- Maven实战（十一）eclipse下载依赖jar包出问题
问题描述 在pom.xml中配置了依赖,但是提示依赖不成功,或在本地仓库找不到相关依赖 大致错误如下: ArtifactDescriptorException: Failed to read arti ...
- jQuery实现简易轮播图的效果
(图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...
- 【原创】Apache ab结果参数详解
解释如下: Server Software 服务器软件软件名称. Server Hostname 被测服务器的主机名. Server Port 被测试的Web服务器的监听端口. SSL/TLS Pro ...