<!-- 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绑定事件后触发多次相同的事件的异常的更多相关文章

  1. jquery 触发a链接点击事件

    jquery 触发a链接点击事件 <p class="btnSubmit"><a href="javascript:submitData();" ...

  2. 通过jquery触发select自身的change事件

    ###通过jquery触发select自身的change事件 1.通过js来去触发select的change事件 代码如下:包含了html部分和js部分 //html部分 <select cla ...

  3. jquery:iframe里面的元素怎样触发父窗口元素的事件？

    例如父窗口定义了一个事件. top: $(dom1).bind('topEvent', function(){}); 那么iframe里面的元素怎样触发父窗口dom1的事件呢?这样吗? $(dom1, ...

  4. 如何用按钮的click事件去触发a标签的click事件

    在jQquery中,可以用如下方式触发input.a标签的click事件: <input id="my_input" /> <a id="my_a&qu ...

  5. 关于ASP.net TextBox控件的失去焦点后触发其它事件

    编写人:CC阿爸 2015-2-02 今天在这里,我想与大家一起分享如何处理的ASP.net TextBox控件的失去焦点后触发其它事件的问题,在此做个小结,以供参考.有兴趣的同学,可以一同探讨与学习 ...

  6. Qt自定义事件的实现（军队真正干活，但要增加监军，大平台通知事件，事件内容自定义）

    初学Qt,用了Qt自带的事件,然后想怎么才能定义自己的事件呢?又如何使用自定义事件呢?看了篇文章,说先要子类化QEvent,然后定义自己的QEvent::Type,然后重写QWidget::event ...

  7. IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素

    IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素. attachEvent(type,listener); listener函数中的 ...

  8. 6. 添加messager.alert()确定按钮的回调函数，即点完确定按钮后触发的事件

    添加messager.alert()确定按钮的回调函数,即点完确定按钮后触发的事件: $.messager.alert('提示信息', "请联系管理员处理!", 'info', f ...

  9. iview upload on-format-error 事件 在 before-upload 事件 之后，导致在before里面阻止上传后，监测事件失效，需要自己手工写

    iview upload on-format-error 事件 在 before-upload 事件 之后,导致在before里面阻止上传后,监测事件失效,需要自己手工写

随机推荐

  1. [Nuget] - "Runtime error: Could not load file or assembly 'System.Web.WebPages.Razor, Version=3.0.0.0'" 问题之解决

    环境 项目中使用了 System.Web.WebPages.Razor, Version=3.0.0.0,Nuget 还原缺失包后自动更新至 Version=3.2.5.0,编译成功,运行失败. 错误 ...

  2. Python23之内置函数filter()和map()

    首先我们了解一个概念:迭代 迭代是访问集合元素的⼀种⽅式.迭代器是⼀个可以记住遍历的位置的对象.迭代器对象从集合的第⼀个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退. 我们已经知道 ...

  3. WUSTOJ 1302: 区间k大数查询（Java）

    题目链接:

  4. Docker 学习笔记（二）：Dockerfile 定制镜像

    镜像的定制实际上就是定制每一层所添加的配置.文件. 如果我们可以把每一层修改.安装.构建.操作的命令都写入一个脚本,用这个脚本来构建.定制镜像,那么之前提及的无法重复的问题.镜像构建透明性的问题.体积 ...

  5. .net framework 4.0 安装一直失败，错误代码0x80240037，解决

    本文链接:https://blog.csdn.net/Chris_Ime/article/details/81626778 今天遇到一问题,在新电脑win7系统上安装.net framework 4. ...

  6. idea 实用插件

    尊重劳动成果,本插件的整理原文出自:https://blog.csdn.net/weixin_41846320/article/details/82697818,感谢老铁的辛苦原创. 插件安装方式: ...

  7. 使用abapGit在ABAP On-Premises系统和SAP云平台ABAP环境之间进行代码传输

    SAP ABAP顾问朋友们,应该都使用过SAPLink这个工具.如果两个ABAP Netweaver系统没有建立起传输路径时,我们无法使用标准的SE10事务码创建传输请求的方式进行这两个系统间的代码传 ...

  8. Nginx作为缓存服务

    缓存类型 (1) 服务器缓存 服务端缓存一般使用Memcache.Redis (2)代理缓存 (3)客户端缓存 代理缓存流程图 第一步:客户端第一次向Nginx请求数据a: 第二步:当Nginx发现缓 ...

  9. linux跳板机开发之trap信号机应用

    场景1:公司新招聘了一个配置管理员,他的工作是负责将公司开发人员写的新代码依次分发到办公室测试环境.IDC测试环境和正式线上环境.因此公司需要开发一个程序,当配置管理员登录服务器,只能进入分发的管理界 ...

  10. java一些基本算法

    本文主要介绍一些常用的算法: 冒泡排序:两两相互之间进行比较,如果符合条件就相互兑换. //冒泡排序升序 public static int[] bubblingSortAsc(int[] array ...