蒙板进入离开效果的制作 

 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             width: 200px;
10             height: 200px;
11             position: relative;
12         }
13         .beijing {
14             width: 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             width: 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()方法，清除没有来得及执行的动画。

 

posted @ 2015-06-18 14:55  如梦令szy  阅读(244)  评论(0)  编辑  收藏  举报