Jquery的
animate()
方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。
在一些Web APP中(特别是移动端Web APP)子菜单散开动画是比较常见的,我们可以使用Jquery的animate快速实现。
示例使用了font-awesome图标库,class="fa fa-times-circle"
就是引用了font-awesome图标,实际开发可以使用自己的图标或图片代替。
如果大家想要下面的示例能直接跑起来可以引入font-awesome图标库
<link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/fontawesome/4.4.0/css/font-awesome.min.css">
html 代码
<div id="jiucuo" class="details-btn">
<span class="fa fa-times-circle"></span>
<span class="details-btn-text">纠错</span>
</div>
<div id="xinzeng" class="details-btn">
<span class="fa fa-plus-circle"></span>
<span class="details-btn-text">新增</span>
</div>
<div id="shezhi" class="details-btn">
<span class="fa fa-cog"></span>
<span class="details-btn-text">设置</span>
</div>
<div id="wode" class="details-btn">
<span class="fa fa-user"></span>
<span class="details-btn-text">我的</span>
</div>
<div id="more-btn" onclick="openAndCloseMoreBtn()">
<span class="fa fa-th-large"></span>
</div>
CSS代码
#more-btn{
position: absolute;
z-index: 999;
left: 15px;
bottom: 15px;
width: 45px;
height: 45px;
background: white;
border-radius: 10px;
box-shadow: 0px 3px 6px #9b9b9b;
text-align: center;
line-height: 60px;
}
#more-btn .fa{
color: #007bcc;
font-size: 28px;
}
.details-btn{
width: 45px;
height: 45px;
position: absolute;
bottom: 0px;
left: 0px;
z-index: 99;
opacity: 0;
background: #fff;
border-radius: 15px;
box-shadow: 0px 2px 5px #9b9b9b;
text-align: center;
line-height: 10px;
}
.details-btn-text{
font-size: 10px;
color: #9b9b9b;
}
#jiucuo .fa{
width: 45px;
font-size: 25px;
color: #f93;
}
#xinzeng .fa{
width: 45px;
font-size: 25px;
color: #bc1339;
}
#shezhi .fa{
width: 45px;
font-size: 25px;
color: #696969;
}
#wode .fa{
width: 45px;
font-size: 25px;
color: #007bcc;
}
JavaScript代码
var more_btn_sum=1;
function openAndCloseMoreBtn(){
if(more_btn_sum!=-1){
$('#jiucuo').animate({'left':'10px','bottom':'130px','opacity':'1'});
$('#xinzeng').animate({'left':'68px','bottom':'113px','opacity':'1'});
$('#shezhi').animate({'left':'114px','bottom':'67px','opacity':'1'});
$('#wode').animate({'left':'140px','bottom':'10px','opacity':'1'});
}else{
$('#jiucuo').animate({'left':'0px','bottom':'0px','opacity':'0'});
$('#xinzeng').animate({'left':'0px','bottom':'0px','opacity':'0'});
$('#shezhi').animate({'left':'0px','bottom':'0px','opacity':'0'});
$('#wode').animate({'left':'0px','bottom':'0px','opacity':'0'});
}
more_btn_sum= more_btn_sum*-1;
}