1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="js/jquery-2.0.1.min.js"></script> 7 <style> 8 .nav { 9 200px; 10 height: 200px; 11 position: relative; 12 } 13 .beijing { 14 200px; 15 height: 200px; 16 } 17 .top { 18 top: -100px; 19 left: -100px; 20 background-color: aquamarine; 21 opacity: 0.5; 22 position: absolute; 23 24 } 25 .bottom { 26 bottom: 0px; 27 right: 0px; 28 background-color: aquamarine; 29 opacity: 0.5; 30 position: absolute; 31 } 32 .wenzi { 33 150px; 34 height: 180px; 35 position: absolute; 36 top: 5px; 37 left: 5px; 38 display: none; 39 } 40 </style> 41 <script> 42 $(function(){ 43 $("div.nav").hover(function(){ 44 $("div.top").stop(false,true).animate({"top":"0","left":"0"},200); 45 46 $("div.top").stop(false,true).animate({"height":"100","width":"200"},500); 47 $("div.bottom").stop(false,true).animate({"height":"100","width":"200"},500); 48 $("div.wenzi").stop(false,true).fadeIn(500); 49 }); 50 $("div.nav").mouseleave(function(){ 51 $("div.top").stop(false,true).animate({"height":"0","width":"0","top":"0","left":"0"},500); 52 $("div.bottom").stop(false,true).animate({"height":"0","width":"0","bottom":"0","right":"0"},500); 53 $("div.wenzi").stop(false,true).fadeOut(500); 54 55 }); 56 }); 57 </script> 58 </head> 59 <body> 60 <div class="nav"> 61 <img src="images/c.png" class="beijing"/> 62 <div class="top"></div> 63 <div class="bottom"></div> 64 <div class="wenzi">做个温文尔雅的女孩子<br>~安安静静 静听花开</div> 65 </div> 66 </body> 67 </html>
在做这个效果时首先遇到的的问题是如何让蒙板飞入飞出，因为开始的时候把蒙板的div定位在了nav里，所以他一直在盒子里无法出去再进来。问题的解决方案是：开始把蒙板定位到盒子外面。这样就有了进入出去的空间。
第二个问题是连续鼠标滑入滑出出现的bug~即鼠标已经离开，但是那些函数还在执行，这种问题的解决方案是在滑入函数中加入stop()方法，清除没有来得及执行的动画。