jquery 使用off移除事件 使用one绑定一次事件，on绑定事件后触发多次相同的事件的异常
<!-- jquery 移除事件，绑定一次事件，搜狗 one -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style> </style>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
.container {
width: 500px;
height:230px;
margin: 100px auto 0;
}
button {
width: 50%;
height: 30px;
line-height: 30px;
}
h1{
width: 500px;
margin: auto;
}
/*---上面不用看，重点在下面---*/
/* 以下是关于 .box对象 使用 transitionend(动画结束后执行的操作)，
在jQuery中 使用on 绑定 transitionend ，.box 中有几个属性变化，transitionend就会执行几次。
如果只绑定一次，谨记使用 $box.off('transitionend').one('transitionend',function(){...}) */
.box {
/* 还有一个属性在初始化的时候设置的，看下面JS的初始化 */
height: 200px;
background: #f0e;
padding-top: 20px;
padding-bottom: 20px;
overflow: hidden;
}
.fadeSlideUpDown {
height: 0 !important;
opacity: 0 !important;
width: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
/* 设置高度过度类，必须设定上下内边距，因为标准模式的宽 = 上下内边距 + 实际宽度，如果是怪异模式那就可能不需要设置内边距 */
/* 同理：设置宽度过度类，必须设定左右内边距，因为标准模式的宽 = 上下内边距 + 实际宽度，如果是怪异模式那就可能不需要设置内边距 */
}
.transition {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
</style>
</head>
<body>
<div class="container">
<button class="show">显示</button><button class="hide">隐藏</button>
<div class="box">
<p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>
</div>
<h1>显示有</h1>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
//获取jQuery对象
var $show = $('.show'),
$hide = $('.hide'),
$box = $('.box');
//初始化$el对象
function init($ele){
//这里的$box的高度是由内容撑开的，即没有设定高度，就是说浏览器不知道$box的高度
//所以使用过度属性 transition 时，不会有过渡效果，
//浏览器解析 不知道的高度 0px 相互过度 ,就是瞬间显示隐藏。
//所以这里必须在初始化的时候就获取$box的宽高，并且显示的设置宽高即可解决。
//如果上下过度，就设定 height,左右过度就设置 width 即可。
$ele.width($ele.width());
$ele.height($ele.height()); //添加动画
$ele.addClass('transition'); //判断$ele对象是否显示，并且设置相应状态，并且添加相应转态必须添加的类
if ($ele.is(':hidden')) {
$ele.data('status','hidden');
$ele.addClass('fadeSlideUpDown');
}else{
$ele.data('status','shown');
}
}
//给$box对象绑定以下四个事件。
$box.on('show shown hide hidden',function(e){
console.log(e.type)
})
//给显示按钮绑定事件
$show.on('click',function(){
//如果状态相同，则不执行。
if ($box.data('status')==='show' || $box.data('status')==='shown') return;
//事件触发之前，设置状态，并且触发指定事件，应用于：按需加载，即显示之前加载。下拉菜单
$box.data('status','show').trigger('show');
//这里使用一个异步调用的假象，对象显示20毫秒后，就执行一个显示的动画欺骗用户，这就是显示的效果。
$box.show();
setTimeout(function(){
//所有改变样式都使用 removeClass('xx') 添加类的方式防止浏览器重绘和回流，提高浏览器性能。
$box.removeClass('fadeSlideUpDown');
},20);
//动画结束之后，设置状态，并且触发指定事件
$box.off('transitionend').on('transitionend',function(){
//事件 shown 会触发5次，因为这里使用on进行绑定 transitionend 动画结束后执行的事件
//而 $box 有5个属性变化，即有5次动画，每一次执行完成都会触发一次shown事件。
$box.data('status','shown').trigger('shown');
})
})
//给隐藏按钮绑定事件
$hide.on('click',function(){
//如果状态相同，则不执行。
if ($box.data('status')==='hide' || $box.data('status')==='hidden') return;
//事件触发之前，设置状态，并且触发指定事件。
$box.data('status','hide').trigger('hide');
//所有改变样式都使用 addClass('xx') 添加类的方式防止浏览器重绘和回流，提高浏览器性能。
$box.addClass('fadeSlideUpDown');
$box.off('transitionend').on('transitionend',function(){
$box.hide();
//事件 hidden 会触发5次，因为这里使用on进行绑定 transitionend 动画结束后执行的事件
//而 $box 有5个属性变化，即有5次动画，每一次执行完成都会触发一次hidden事件。
//这里想要所有动画合并算一次，每次执行之前就移除之前的transitionend事件，重新开始执行
//所以这里要使用 $box.off('transitionend').one('transitionend') 进行绑定,
//只绑定一次，每次执行前，移除之前绑定的transitionend。
//动画基本都必须在执行前移除之前的动画。
$box.data('status','hidden').trigger('hidden');
})
}) //初始化
init($box);
</script>
</body>
</html>
jquery 使用off移除事件 使用one绑定一次事件，on绑定事件后触发多次相同的事件的异常的更多相关文章
- jquery 触发a链接点击事件
jquery 触发a链接点击事件 <p class="btnSubmit"><a href="javascript:submitData();" ...
- 通过jquery触发select自身的change事件
###通过jquery触发select自身的change事件 1.通过js来去触发select的change事件 代码如下:包含了html部分和js部分 //html部分 <select cla ...
- jquery:iframe里面的元素怎样触发父窗口元素的事件？
例如父窗口定义了一个事件. top: $(dom1).bind('topEvent', function(){}); 那么iframe里面的元素怎样触发父窗口dom1的事件呢?这样吗? $(dom1, ...
- 如何用按钮的click事件去触发a标签的click事件
在jQquery中,可以用如下方式触发input.a标签的click事件: <input id="my_input" /> <a id="my_a&qu ...
- 关于ASP.net TextBox控件的失去焦点后触发其它事件
编写人:CC阿爸 2015-2-02 今天在这里,我想与大家一起分享如何处理的ASP.net TextBox控件的失去焦点后触发其它事件的问题,在此做个小结,以供参考.有兴趣的同学,可以一同探讨与学习 ...
- Qt自定义事件的实现（军队真正干活，但要增加监军，大平台通知事件，事件内容自定义）
初学Qt,用了Qt自带的事件,然后想怎么才能定义自己的事件呢?又如何使用自定义事件呢?看了篇文章,说先要子类化QEvent,然后定义自己的QEvent::Type,然后重写QWidget::event ...
- IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素
IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素. attachEvent(type,listener); listener函数中的 ...
- 6. 添加messager.alert()确定按钮的回调函数，即点完确定按钮后触发的事件
添加messager.alert()确定按钮的回调函数,即点完确定按钮后触发的事件: $.messager.alert('提示信息', "请联系管理员处理!", 'info', f ...
- iview upload on-format-error 事件 在 before-upload 事件 之后，导致在before里面阻止上传后，监测事件失效，需要自己手工写
iview upload on-format-error 事件 在 before-upload 事件 之后,导致在before里面阻止上传后,监测事件失效,需要自己手工写
随机推荐
- （6）Spring Boot web开发 --- 错误处理页面
文章目录 处理时间(`Date`)类型 thymeleaf 页面拼接字符串 映射路径占位符 使用 put.delete 方法 错误处理机制 处理时间(Date)类型 Spring Boot 进行参数绑 ...
- 函数的第一类对象,f格式化,迭代器以及递归
函数名的第一类对象及使用,f格式化以及迭代器 1.函数的第一类对象 第一类对象 --特殊点 1.可以当作值被赋值给变量 def func(): print(1) a = func a() 2.可以当作 ...
- Scratch编程：绘制七色花（七）
“ 上节课的内容全部掌握了吗?反复练习了没有,编程最好的学习方法就是练习.练习.再练习.一定要记得多动手.多动脑筋哦~~” 01 — 游戏介绍 绘制一朵美丽的七色花. 02 — 设计思路 使用画笔功能 ...
- 动态script标签同步加载 ps：无打包编译，静态实现静态资源入口动态配置，无编译打包静态资源添加版本号
/**功能:创建动态标签加载css ,js文件,重点是js文件,利用onloading加递归实现动态标签的同步加载用法:在html文件body底部script内部声明并调用下列函数,obj中写要加载的 ...
- 安利一下stringstream
关于实用的 stringstream 处理毒瘤输入数据 比如这个题 在输入的时候有很多问题,如果用scanf输入char型字符串,那么不好用map判断,并且读入整行判断换行会很麻烦 如果选择用stri ...
- 题解-CTS2019氪金手游
Problem \(\mathtt {loj-3124}\) 题意概要:给定 \(n\) 个点,\(w_i\) 分别有 \(p_{i,1},p_{i,2},p_{i,3}\) 的概率取 \(1,2,3 ...
- linux测试umask
客户需求,由于ftp服务器权限管理需要,测试能否通过修改oracle umask值,达到expdp导出文件权限,导出即是想要的权限. Session [oracle@adg1 ~]$ umask [o ...
- Ubuntu install android studio
Ubuntu install android studio 1. 安装 openjdk8,并在配置文件 /etc/profile 中,追加如下内容: sudo aptitude install ope ...
- mysql中常用的数据类型
MySQL是一种关系数据库管理系统,关系数据库将数据保存在不同的表中,而不是将所有数据放在一个大仓库内,这样就增加了速度并提高了灵活性.MySQL所使用的 SQL 语言是用于访问数据库的最常用标准化语 ...
- UI5-技术篇-Navigation And Routing
主要记录下Router设置过程中出现的几个问题 1.View 首页设置 controlId 2.Manifest设置 2.1设置启动页 2.2设置默认配置 2.3设置Targets 首页设置 子页设置 ...