<!-- 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. EFCore 通过实体Model生成创建SQL Server数据库表脚本

    在我们的项目中经常采用Model First这种方式先来设计数据库Model,然后通过Migration来生成数据库表结构,有些时候我们需要动态通过实体Model来创建数据库的表结构,特别是在创建像临 ...

  2. JAVA httpURLConnection curl

    // 文件路径 D:\ApacheServer\web_java\HelloWorld\src\com\test\TestHttpCurl.java package com.test; import ...

  3. Pythn基础课程笔记day03_学习内容概要及作业讲解

    第三天_学习内容概要 今日内容概要 1.整形 2.布尔类型 3.字符串 内容回顾和补充 内容回顾 利用思维导图,罗列复习自己学习的内容,巩固知识点. xmind 软件 processon 网站 补充 ...

  4. Git学习（二）——使用Git协同开发

    项目协同开发git操作 基本流程 1.开发前,拉一次远程仓库 2.工作区进行开发 3.将开发结果提交到本地版本库 git status查看时没有待处理的事件 4.拉取远程仓库(每一次要提交远程仓库前必 ...

  5. AX 2009中现有量画面修改

    前端时间开发一个东西,需要在现有量画面增加一个字段 但是发现这个display方法写在任何数据源下面都不行,数据取的不对. 因为InventSum这个表只有所有维度都出来时才会有对应关联的invent ...

  6. H5中表格的用法

    1.表格的基本结构: 表格由行和列组成,单元格式表格的最基本单元;每个表格均有若干行,行标签由<tr></tr>定义,每行被分割为若干单元格,由<td></t ...

  7. springboot整合druid、mybatis

    目的: 1.springboot配置数据库连接池druid 测试druid中url监控 2.springboot整合mybatis 测试查删案例 3.springboot整合pagehelper sp ...

  8. Javascritp Array数组方法总结

    合并数组 - concat() 用法一 (合并两个数组) var hege = ["Cecilie", "Lone"]; var stale = [" ...

  9. ES与关系型数据库的通俗比较

    1.在Elasticsearch中,文档归属于一种类型(type),而这些类型存在于索引(index)中,我们可以画一些简单的对比图来类比传统关系型数据库: Relational DB -> D ...

  10. vue使用技巧：Promise + async + await 解决组件间串行编程问题

    业务场景描述 大家都通过互联网投递过简历,比如在智联.58.猎聘等平台.投递心仪的职位前一般都需要前提创建一份简历,简历编辑界面常规的布局最上面是用户的个人基本信息,如姓名.性别.年龄.名族等,接着是 ...