1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <MetaID= "Viewport"name= "Viewport"content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=yes"/>6 <title>Document</title>7 <style>8 *{margin:0;padding:0}9 Html,body{width:100%;Height:100%;Overflow:Hidden;position:relative}Ten #div1{width:100%;Height:100%;background:#f0f;position:Absolute} One #div2{width:100%;Height:100%;background:#00f;position:Absolute; Left:0} A . Top{Top:100%;} - . Bottom{Top:0} - . Hide{Display:None} the </style> - <Linkrel= "stylesheet"href= "Animate.min.css"/> - </Head> - <DivID= "Div1"class= "animated"> + </Div> - <DivID= "Div2"class= "Bottom Hide"> + A </Div> at <Body> - <Scriptsrc= "Jquery.js"></Script> - <Script> - //$ (function () { - // - //$ ("#div1"). Click (function () { in //$ ("#div2"). One (' Webkitanimationend mozanimationend msanimationend oanimationend animationend ', function () { - //$ ("#div2"). Removeclass (effect); to // }); + //var effect = ' animated bounceinup '; - //$ ("#div2"). Removeclass ("Hide"). AddClass (effect); the // }) * //$ ("#div2"). Click (function () { $ //$ ("#div2"). One (' Webkitanimationend mozanimationend msanimationend oanimationend animationend ', function () {Panax Notoginseng //$ ("#div2"). Removeclass (effect). addclass ("Hide"); - // }); the //var effect = ' animated Bounceoutdown '; + //$ ("#div2"). addclass (effect); A // the // }) + // }) - </Script> $ <Script> $ $(function(){ - - $("#div1")[0].addeventlistener ("Click",function(){ the Alert ( One); - $("#div1")[0].removeeventlistener ("Click", Arguments.callee,false)Wuyi },false) the }) - </Script> Wu </Body> - </HTML>
AddEventListener listener events are automatically canceled after completion of the one method compared to jquery; animate animation, Arguments.callee usage