jqury+animation+setTimeOut实现渐变显示与隐藏动画

初始效果

  

实现效果

1，编写HTMl结构代码

1 <div class="box">
2     <i class="icon"></i>
3     <h3>二维码</h3>
4     <div class="img_box fadeIn" style="display: none;">
5         <img src="asset/images/code.png">
6     </div>
7 
8 </div>
9 <script type="text/javascript" src="asset/js/jquery.min.js"></script>

2，编写CSS样式

 1 /*定义盒子的样式*/
 2 .box{width: 100px; height: 100px; text-align: center; position:relative; border: 1px solid #ccc; font-family: arial, helvetica, sans-serif; margin:50px auto;}
 3 .box h3{font-size: 14px;}
 4 .icon{ display: block; height: 35px;background: url('../images/logo-efose.png') center center no-repeat;}
 5 .img_box{ position:absolute; left:100%; bottom:0;}
 6 
 7 /*设置隐藏过程的动画*/
 8 .fadeIn{
 9     -webkit-animation:fadeIn 1s;
10     -moz-animation:fadeIn 1s;
11     -ms-animation:fadeIn 1s;
12     -o-animation:fadeIn 1s;
13     animation:fadeIn 1s;
14 }
15 /*设置显示过程的动画*/
16 .fadeOut{
17     -webkit-animation:fadeOut 1s;
18     -moz-animation:fadeOut 1s;
19     -ms-animation:fadeOut 1s;
20     -o-animation:fadeOut 1s;
21     animation:fadeOut 1s;
22 }
23 /*设置隐藏过程的动画的关键帧（只限于webket内核浏览器）*/
24 @-webkit-keyframes fadeIn {
25     0%{
26         opacity: 1;
27         -webkit-transform:translateX(0px);
28     }
29     100%{
30         opacity: 0;
31         -webkit-transform:translateX(-50px);
32     }
33  }
34 /*设置显示过程的动画的关键帧（只限于webket内核浏览器）*/
35 @-webkit-keyframes fadeOut {
36     0%{
37         opacity: 0;
38         -webkit-transform:translateX(-50px);
39     }
40     100%{
41         opacity: 1;
42         -webkit-transform:translateX(0);
43     }
44 }

3，编写脚本

 1 <script type="text/javascript">
 2 
 3 
 4 
 5 
 6  (function(){
 7         var timeId;
 8         //hover时间，移入显示
 9         $(".box").hover(function () {
10             if(timeId){
11                 clearTimeout(timeId);
12             }
13             $(this).find(".img_box").removeClass("fadeIn").show().addClass("fadeOut");
14             //hover时间，移出显示    
15         },function(){
16             var img_box =$(this).find(".img_box");
17             img_box.removeClass("fadeOut").addClass("fadeIn");
18             //设置延迟1秒，与样式中animation时间一样 
19             timeId=setTimeout(function(){
20                 img_box.hide();
21             },1000)
22         })
23     })();
24 
25 </script>

 

posted @ 2015-09-18 16:34  lokou  阅读(659)  评论(0)  编辑  收藏  举报