<style> *{margin:0; padding:0;} #target{ border-radius:10px; background:#eee; } .fade{/*动画起始状态*/ height:104px; width:970px; opacity:1; padding: 10px; border: 1px solid #aaa; overflow:hidden; } .out{/*动画结束状态*/ } </style> </head> <body> <h1>jQuery动画函数——显示隐藏动画</h1> <button id="btn1">显示/隐藏div</button> <div id="target"> <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore debitis animi sint iste sequi sunt ad excepturi error labore molestiae est expedita eos nisi placeat provident dolorem quos facilis! Sapiente!</span><span>Accusamus neque id reprehenderit! Voluptatem in deleniti laboriosam commodi facere magnam impedit minima corrupti distinctio culpa amet optio natus esse. Inventore incidunt ab id perspiciatis atque minus magnam tempore harum.</span></p> </div> <script src="js/jquery-1.11.3.js"></script> <script> $("#btn1").click(function(){ //这个this代表btn1 console.log($(this)); $("#target").animate({ opacity:0 },2000,function(){
//回调函数，在动画执行完后执行的代码 //这个this代表target console.log($(this)); $(this).hide(); }); $("#target").click(function(){ alert("疼"); }) //.toggle(3000) //.slideToggle(3000) //.fadeToggle(3000) //为动画函数添加回调函数，输出"动画结束" }); </script> </body>