工作中遇到的动画

1.描述：在整个网站页面上该图片都显示，当用户关闭按钮之后，一个浏览器不管打开几个标签页图片都不显示除非关闭浏览器后重新打开浏览器。

<script language="javascript" type="text/javascript" src="/JS/JQuery/jquery.cookie.js"></script>

 var COOKIE_NAME = "showbox";        
 if($.cookie(COOKIE_NAME)){                
        $(".cgonline").hide();
 }else{
        $(".cgonline").show();
 }

$(".img_closed").click(function(){
            $(".cgonline").css("display","none");
            $.cookie(COOKIE_NAME,'ishide',{ path: '/'});

 });

还有一种需求是当前标签页关闭之后不显示，再打开其他标签页会显示。

  if(sessionStorage.heihei == 'cookie_linekey'){        
            $(".cgonline").css("display","none");


         }else{
            $(".cgonline").css("display","block");
         }

 $(".img_closed").click(function(){
            $(".cgonline").css("display","none");
            sessionStorage.heihei = 'cookie_linekey';
        });

当鼠标悬浮上去，另一个div出来，并且上面的字可以点击。就像二级菜单功能一样，只是他是水平的。

 $(".cgonline_cont").hover(function(){
            $(".cgonline_detail").stop().animate({width:'600px'},'swing');
        },function(){
            
            $(".cgonline_detail").stop().animate({width:'0px'},'liner');
            
        });
        
        $(".cgonline_detail").hover(function(){
            $(".cgonline_detail").stop().animate({width:'600px'},'swing');
        },function(){
            
            $(".cgonline_detail").stop().animate({width:'0px'},'liner');
            
        });

2.导航条有两种动画，第一种鼠标悬浮上去红色区域向上滑动。

 $(".head-info .nav li").hover(function(){
        $(this).children(".liTop").stop().animate({"top":"-30px"});  //白色向上滑动
        $(this).children(".hoverRed").stop().animate({"top":"0px"});//红色向上滑动
    },function(){
        $(this).children(".hoverRed").stop().animate({"top":"30px"}); //白色向下滑动
        $(this).children(".liTop").stop().animate({"top":"0px"});//红色向下滑动
    });

3.小箭头翻转180deg,下拉列表出现，鼠标离开时，小箭头翻转180deg,下拉列表隐藏。

 //我要投资
    $(".head-info .nav .myInvest").hover(function(){
        $(this).children("span").removeClass("hover-up").addClass("hover-down");
        $(this).find(".investDown").css("height","90px").stop().slideDown(300);
    },function(){
        $(this).children("span").removeClass("hover-down").addClass("hover-up");
        $(this).find(".investDown").stop().slideUp(300);
    });

css样式：

/*图标向下旋转*/
.hover-up{
    transition-duration: .5s;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
/*图标向上旋转*/
.hover-down{
    transition-duration: .5s;
-webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

4,当鼠标悬浮上去，颜色渐渐变色，sapn宽度慢慢变大

 $(".flr p").hover(function(){
        $(this).find("span").stop().animate({"width":$(this).css("width")});
    },function(){
       $(this).find("span").stop().animate({"width":"0px"});
    });

css样式：

.topbar .flr p a {
color:#4F4F4F;
text-decoration:none;
-webkit-transition:color .7s;
-moz-transition:color .7s;
-ms-transition:color .7s;
-o-transition:color .7s;
transition:color .7s;

}

5.当鼠标悬浮上去，从原来的地方出来一个span,滑动到当前位置。

    $(".titletoptxt label").click(function(){
        $(this).addClass("on").siblings().removeClass('on');
        $(this).siblings("span").css("left",($(this).attr("index")*140)+"px");   
    });
    $(".titletoptxt label").hover(function(){
        $(this).siblings("span").stop().animate({
            "width":"70px",
            "left":($(this).attr("index")*140)+"px"
        });   
    },function(){
        $(this).siblings("span").stop().animate({
            "left":($(this).siblings(".on").attr("index")*140)+"px",
             "width":"0px"
        });
    });

6.当鼠标悬浮上去，手机向上滑动。字体颜色改变，span宽度变大，下拉列表出现。

  $(".client").hover(function(){        
        $(this).find(".call_img2").stop().animate({"backgroundPositionX":"0px","backgroundPositionY" :"-36px"},200);
        $(".call .client span.width").stop().animate({"width":"126px"});
        $(".luCode").css("height","160px").stop().slideDown(300);
    },function(){
       $(this).find(".call_img2").stop().animate({"backgroundPositionX":"0px","backgroundPositionY" :"0px"},200);
        $(".call .client span.width").stop().animate({"width":"0px"});
        $(".luCode").stop().slideUp(300);
    });