<-! Jquery remove the event, a binding event, Sogou One ->
<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-8">
<title> drop-down menu </ title>
<style>
</ style>
<style>
* {
padding: 0;
margin: 0;
List-style: none;
}
.container {
width: 500px;
height: 230px;
margin: 0 Auto 100px;
}
Button {
width: 50%;
height: 30px;
Line-height: 30px;
}
h1 of {
width: 500px;
margin: Auto;
}
/ * --- do not see the above, the following key --- * /
/ * Here are .box objects using transitionend (operations performed after the end of the animation),
Use in jQuery on binding transitionend, .box has several attributes change, transitionend will be performed several times.
If only once bound, remember box.off use $ ( 'transitionend'). One ( 'transitionend', function () {...}) * /
.box {
/ * initialize when there is a setting attribute to see below JS initialization * /
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;!
/ * set the height over class, must be set within the upper and lower margins, because the margins of the upper and lower width = actual width of the standard mode + , if it may not need to strange pattern within set margins * /
/ * Similarly: set the width over class, must be set within the left and right margins, because the margins of the vertical width = + actual width of the standard mode, if it is it may not need to strange pattern within set margins * /
}
.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 of the type = "text / JavaScript" src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </ Script>
<Script>
// get jQuery Object
var Show = $ $ ( '. Show'),
$ hide = $ ( '. hide'),
$ Box = $ ( '. Box');
// initialize objects EL $
function the init ($ ELE) {
// $ box height is determined by the content of this distraction, that there is no set height, that the browser does not know the $ box height
// so the use of excessive property transition, there will be no transition effects,
// browser is not resolved excessive height 0px know each other, that is the moment to show hidden.
// So here we have to get the width and height $ box at initialization time, and set the width and height of the display can be solved.
// If excessive up and down, you set the height, width can be set up around it excessive.
ele.width $ ($ ele.width ());
$ ele.height ($ ele.height ());
// add animation
$ ele.addClass ( 'transition');
IF ($ ele.is ( ': hidden')) {
the setTimeout (function () {
ele.data $ ( 'Status', 'hidden');
$ ele.addClass ( 'fadeSlideUpDown');
} the else {
$ ele.data ( 'Status', 'Shown');
}
}
// objects tied to the $ Box the following four events scheduled.
box.on $ ( 'Show hidden Shown hide', function (E) {
the console.log (e.type)
})
// the display button binding event
$ show.on ( 'the Click', function () {
// If the status is the same, it is not performed.
; IF ($ box.data ( 'status') === 'Show' || $ box.data ( 'status') === 'Shown') return
before the trigger event // set state, and trigger the specified event, apply to: demand loading, loading is displayed before the drop-down menu.
$ box.data ( 'status', 'show') the trigger ( 'show');.
// here using an asynchronous after calling the illusion, objects appear 20 milliseconds, executes a display of animation deceive users, this is the show the effect of
$ box.show ();
box.removeClass $ ( 'fadeSlideUpDown');
}, 20 is);
after the end of the animation // set state, and triggers the specified event
$ box.off (. 'transitionend') ON ( 'transitionend', function () {
// events shown will trigger five times, as used here for event execution on the end of the binding transitionend animation
// and $ box has five attributes change, that is five times the animation, each execution is completed triggers a shown event.
$ box .data ( 'status', 'Shown') Trigger ( 'Shown');.
})
})
// event bound to the hidden button
$ hide.on ( 'the Click', function () {
// If the same state, . is not performed
if ($ box.data ( 'status' ) === 'hide' || $ box.data ( 'status') === 'hidden') return;
before // event trigger, setting state, and trigger the specified event.
$ box.data ( 'Status', 'hide').
box.addClass $ ( 'fadeSlideUpDown');
$box.off('transitionend').on('transitionend',function(){
$ box.hide ();
// event hidden trigger five times, because here on the use of event-binding transitionend executed after the end of the animation
// and $ box has five attributes change , that is five times the animation, each execution is completed triggers a hidden event.
// here all the movies you want to merge counted once, before it is removed transitionend event before each execution, execution resumes
// So here you want to use $ box.off ( 'transitionend'). Were tied one ( 'transitionend') fixed,
// bind only once before each execution, the bindings before removing transitionend.
// basic animation animation must be removed before before execution.
.; $ ( 'Status', 'hidden') Trigger ( 'hidden') box.data
})
})
// initialize
the init ($ Box);
</ Script>
</ body>
</ HTML>