Jquery实现子菜单散开动画

原创 2017年09月09日 15:23:05

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;
}

显示效果

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

css3 做一个会动的菜单 menu 按钮动画效果

css3 做一个会动的菜单 menu 按钮动画效果需要做一个会的动画按钮效果,小前端部知道如何实现,我看了一眼需要的效果,给他写了一个简单的 demo。设计师给了俩图片,一个是 三 这样的菜单图标,另...
  • FungLeo
  • FungLeo
  • 2017年09月11日 11:45
  • 1403

固定背景图片

background-attachment 该属性来定义背景图片随滚动轴的移动方式 取值: scroll | fixed | inherit scroll: 随着页面的滚动轴背景...

利用jquery实现百度新闻导航菜单滑动动画

原网址:http://www.oschina.net/code/snippet_1189644_54162 jquery仿百度新闻菜单滑动动画 - 何问起 ...

jQuery实现简单的导航按钮焦点背景更换(代替css hover)以及弹出子菜单 我的第一篇博文

这是我的第一篇博文,我对计算机网络和web编程开发感兴趣,有时也试着写一点java,目前在上大学,知识学习刚刚起步。以后打算经常写一些自己遇到的问题和知识,记录的同时接受指点,不仅日后方便查阅,也有个...
  • as66t
  • as66t
  • 2012年12月08日 19:32
  • 3029

jquery实现flash图片文字切换动画

  • 2015年07月20日 10:51
  • 485KB
  • 下载

网站抽屉菜单(jquery实现)

  • 2011年09月08日 09:28
  • 33KB
  • 下载

jQuery实现省市县三级联动菜单

编写省市县数据,放在数组中,取名:provincesdata.js/********** 省级数据 **********/ var GP =['安徽','澳门','北京','福建','甘肃','广东'...

jquery实现的动画隐藏登陆框.rar

  • 2009年08月10日 14:56
  • 59KB
  • 下载

jquery实现新闻菜单选项

//防新闻实现下拉菜单模式,很实用哦 jquery实现新闻菜单选项 .list{ list-style-type:none } .list li{ line-height:30p...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery实现子菜单散开动画
举报原因:
原因补充:

(最多只允许输入30个字)