1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta id="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} 10 #div1{width:100%;height:100%;background: #f0f;position: absolute} 11 #div2{width:100%;height:100%;background: #00f;position: absolute;left:0} 12 .top{top:100%;} 13 .bottom{top:0} 14 .hide{display: none} 15 </style> 16 <link rel="stylesheet" href="animate.min.css"/> 17 </head> 18 <div id="div1" class="animated"> 19 </div> 20 <div id="div2" class=" bottom hide"> 21 22 </div> 23 <body> 24 <script src="jquery.js"></script> 25 <script> 26 // $(function(){ 27 // 28 // $("#div1").click(function(){ 29 // $("#div2").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { 30 // $("#div2").removeClass(effect); 31 // }); 32 // var effect = 'animated bounceInUp'; 33 // $("#div2").removeClass("hide").addClass(effect); 34 // }) 35 // $("#div2").click(function(){ 36 // $("#div2").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { 37 // $("#div2").removeClass(effect).addClass("hide"); 38 // }); 39 // var effect = 'animated bounceOutDown'; 40 // $("#div2").addClass(effect); 41 // 42 // }) 43 // }) 44 </script> 45 <script> 46 $(function(){ 47 48 $("#div1")[0].addEventListener("click",function(){ 49 alert(11); 50 $("#div1")[0].removeEventListener("click",arguments.callee,false) 51 },false) 52 }) 53 </script> 54 </body> 55 </html>