jquery css3 手机菜单动画综合版

<header>
<a id="go-back" href="javascript:window.location.back(-1)" title="返回"></a>
<a href="/wap/" id="header-title">邮币财富网</a>
<a href="javascript:;" id="menu" title="menu">
<button>
<span></span>
</button>
</a>
<div class="menu-list">
<a href="/index.php?r=wap/news/index/catid/1">市场资讯</a>
<a href="/index.php?r=wap/news/index/catid/8">交易指南</a>
<a href="/index.php?r=wap/news/index/catid/5">通知公告</a>
<a href="/index.php?r=wap/single/about">关于我们</a>
<a href="">市场点评</a>
<a href="">软件下载</a>
<a href="http://122.144.180.26:15926/SelfOpenAccount/index.jsp?brokerId=0100">我要开户</a>
</div>
</header>

header {
background: #e33543;
height: 1.8rem;
text-align: center;
position: relative;
}
header .menu-list{
width:4rem;
position: absolute;
right:0rem;
visibility: hidden;
display:block;

z-index: 100;
top:3rem;
opacity: 0;

text-align: center;
-webkit-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
}
header .menu-list.hover{
top:0rem;
opacity: 1;
visibility: visible;
}
header .menu-list a{
display: block;
width:4rem;
background:  rgba(227, 53, 67, 1);
height:1.8rem;
line-height: 1.8rem;
text-align: center;
color:#fff;
font-size:0.6rem;
position: relative;
right:-4rem;

}
header #go-back {
background: url(../images/back.png) no-repeat  center;
width: 1.8rem;
height: 1.5rem;
margin-top:0.15rem;
display: inline-block;
float: left;
display: block;
background-size: 0.55rem;
}
header #header-title {
color: #fff;
font-size: 0.8rem;
width: 5rem;
display: inline-block;
margin: 0 auto;
line-height: 1.8rem;
height: 1.8rem;
vertical-align: top;
}
header #menu {
display: inline-block;
float: right;
height: 1.5rem;
top: 0.15rem;
text-align: center;
position: relative;
right:0rem;
width: 2rem;
}
header #menu.on{
top:0;
opacity: 1;
display: block;
}
header #menu button {
height: 1.5rem;
width: 100%;
margin: 0 auto;
background: none;
outline: none;
cursor: pointer;
padding:0px;
left: 0;
transition: top 0.3s 0.2s ease, transform 0.3s ease;
-webkit-transition: top 0.3s 0.2s ease, -webkit-transform 0.3s ease;
-o-transition: top 0.3s 0.2s ease, -o-transform 0.3s ease;
-ms-transition: top 0.3s 0.2s ease, -ms-transform 0.3s ease;
-moz-transition: top 0.3s 0.2s ease, -moz-transform 0.3s ease;
-moz-transition: background 0.2s 0.1s ease;
-ms-transition: background 0.2s 0.1s ease;
-webkit-transition: background 0.2s 0.1s ease;
-o-transition: background 0.2s 0.1s ease;
transition: background 0.2s 0.1s ease;
border: none;
}
header #menu span {
width: 1.25rem;
height: 0.125rem;
background: #fff;
position: relative;
margin:0 auto;
display: block;
border-radius: 0.125rem;
-o-transition: background 0.3s 0.2s;
-moz-transition: background 0.3s 0.2s;
transition: background 0.3s 0.2s;
-ms-transition: background 0.3s 0.2s;
-webkit-transition: background 0.3s 0.2s;    /*激活之后 ，前面的秒数是动画消耗的时间，后面的秒数是推迟开始的时间*/
}
header #menu span:before {
content: "";
display: block;
top: -0.35rem;
left: 0;
width: 1.25rem;
height: 0.125rem;
background: #fff;
position: absolute;
border-radius: 0.15rem;
transition: top 0.3s 0.2s ease, transform 0.3s ease;
-o-transition: top 0.3s 0.2s ease, -o-transform 0.3s ease;
-moz-transition: top 0.3s 0.2s ease, -moz-transform 0.3s ease;
-ms-transition: top 0.3s 0.2s ease, -ms-transform 0.3s ease;
-webkit-transition: top 0.3s 0.2s ease, -webkit-transform 0.3s ease;
}
header #menu span:after {
content: "";
background: #fff;
display: block;
width: 1.25rem;
height: 0.125rem;
top: 0.35rem;
position: absolute;
left: 0;
border-radius: 0.15rem;
transition: top 0.3s 0.2s ease, transform 0.3s ease;
-webkit-transition: top 0.3s 0.2s ease, -webkit-transform 0.3s ease;
-o-transition: top 0.3s 0.2s ease, -o-transform 0.3s ease;
-ms-transition: top 0.3s 0.2s ease, -ms-transform 0.3s ease;
-moz-transition: top 0.3s 0.2s ease, -moz-transform 0.3s ease;
}
header #menu button.active{
transition: top 0.3s 0.2s ease, transform 0.3s ease;
-webkit-transition: top 0.3s 0.2s ease, -webkit-transform 0.3s ease;
-o-transition: top 0.3s 0.2s ease, -o-transform 0.3s ease;
-ms-transition: top 0.3s 0.2s ease, -ms-transform 0.3s ease;
-moz-transition: top 0.3s 0.2s ease, -moz-transform 0.3s ease;
-moz-transition: background 0.2s 0.1s ease;
-ms-transition: background 0.2s 0.1s ease;
-webkit-transition: background 0.2s 0.1s ease;
-o-transition: background 0.2s 0.1s ease;
transition: background 0.2s 0.1s ease;
}
header #menu button.active span {
background: transparent;
border-radius: 3px;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-moz-transition: background 0.2s 0.1s ease;
-ms-transition: background 0.2s 0.1s ease;
-webkit-transition: background 0.2s 0.1s ease;
-o-transition: background 0.2s 0.1s ease;
transition: background 0.2s 0.1s ease;    /*激活之前 ，前面的秒数是动画消耗的时间，后面的秒数是推迟开始的时间*/
}
header #menu button.active span:before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
top: 0;
-webkit-transition: top 0.3s ease, -webkit-transform 0.3s 0.2s ease;
transition: top .3s ease, -webkit-transform 0.3s 0.2s ease;
-ms-transition: top 0.3s ease, -webkit-transform 0.3s 0.2s ease;
-o-transition: top 0.3s ease, -webkit-transform 0.3s 0.2s ease;
-moz-transition: top 0.3s ease, -webkit-transform 0.3s 0.2s ease;
}
header #menu button.active span:after {
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 0;
-webkit-transition: top 0.3s ease, -webkit-transform 0.3s 0.2s ease;
-ms-transition: top 0.3s ease, -ms-transform 0.3s 0.2s ease;
-o-transition: top 0.3s ease, -o-transform 0.3s 0.2s ease;
-moz-transition: top 0.3s ease, -moz-transform 0.3s 0.2s ease;
}

<script type="text/javascript">
//menu动画，自定义开关
var _a = true;
var t;
var _menu = $('#menu');
var _menu_list = $('header .menu-list');
$("button").click(function(){
if(_a){
$(this).addClass("active");
_menu_list.addClass('hover');
_menu.animate({right:'4rem'},500);

//a标签延迟动画效果
t = setTimeout(function(){
_menu_list.find('a').each(function(i){
var $a = $(this);
setTimeout(function(){
$a.animate({right:'0rem'},200);
},50*i)
})
},200);

_a= false;
}else{
$(this).removeClass("active");
_menu_list.removeClass('hover');
_menu.animate({right:'0rem'},500);
if(t){
clearTimeout(t);
t = setTimeout(function(){
_menu_list.find('a').each(function(i){
var $a = $(this);
setTimeout(function(){
$a.animate({right:'-4rem'},200);
},50*i)
})
},200);
}
_a= true;
}
});
</script>