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

初始效果

实现效果

1，编写HTMl结构代码

 <div class="box">
     <i class="icon"></i>
     <h3>二维码</h3>
     <div class="img_box fadeIn" style="display: none;">
         <img src="asset/images/code.png">
     </div>

 </div>
 <script type="text/javascript" src="asset/js/jquery.min.js"></script>

2，编写CSS样式

 /*定义盒子的样式*/
 .box{width: 100px; height: 100px; text-align: center; position:relative; border: 1px solid #ccc; font-family: arial, helvetica, sans-serif; margin:50px auto;}
 .box h3{font-size: 14px;}
 .icon{ display: block; height: 35px;background: url('../images/logo-efose.png') center center no-repeat;}
 .img_box{ position:absolute; left:100%; bottom:;}

 /*设置隐藏过程的动画*/
 .fadeIn{
     -webkit-animation:fadeIn 1s;
     -moz-animation:fadeIn 1s;
     -ms-animation:fadeIn 1s;
     -o-animation:fadeIn 1s;
     animation:fadeIn 1s;
 }
 /*设置显示过程的动画*/
 .fadeOut{
     -webkit-animation:fadeOut 1s;
     -moz-animation:fadeOut 1s;
     -ms-animation:fadeOut 1s;
     -o-animation:fadeOut 1s;
     animation:fadeOut 1s;
 }
 /*设置隐藏过程的动画的关键帧（只限于webket内核浏览器）*/
 @-webkit-keyframes fadeIn {
     0%{
         opacity:;
         -webkit-transform:translateX(0px);
     }
     100%{
         opacity:;
         -webkit-transform:translateX(-50px);
     }
  }
 /*设置显示过程的动画的关键帧（只限于webket内核浏览器）*/
 @-webkit-keyframes fadeOut {
     0%{
         opacity:;
         -webkit-transform:translateX(-50px);
     }
     100%{
         opacity:;
         -webkit-transform:translateX(0);
     }
 }

3，编写脚本

 <script type="text/javascript">

  (function(){
         var timeId;
         //hover时间，移入显示
         $(".box").hover(function () {
             if(timeId){
                 clearTimeout(timeId);
             }
             $(this).find(".img_box").removeClass("fadeIn").show().addClass("fadeOut");
             //hover时间，移出显示
         },function(){
             var img_box =$(this).find(".img_box");
             img_box.removeClass("fadeOut").addClass("fadeIn");
             //设置延迟1秒，与样式中animation时间一样
             timeId=setTimeout(function(){
                 img_box.hide();
             },1000)
         })
     })();

 </script>