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

显示效果

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

Android圆形散开动画

1 先看效果 主要就是五颗按钮向五个方向散开(我这里是按钮,也可以放成其它控件)。 2 实现 2.1 Android动画知识 http://blog.csdn.net/guolin_blog?vi...
  • zhounanzhaode
  • zhounanzhaode
  • 2015年07月15日 15:26
  • 1174

Android属性动画应用——菜单以散开的方式弹出

一、前言 Google推出的新方法——android属性动画,让很多大牛和热爱技术的人高兴不已,纷纷发表自己的学习心得、认识以及教程。这里,我是通过在慕课网的相关视频学习中,获得的启发,于是...
  • first_three_sun
  • first_three_sun
  • 2015年09月08日 10:22
  • 1769

属性动画-菜单以散开的方式弹出

属性动画-菜单以散开的方式弹出 我们先来看XML文件,文件名是activity_main. FrameLayout xmlns:android="http://schemas.an...
  • laizixingxingdewo
  • laizixingxingdewo
  • 2017年11月25日 10:46
  • 152

html5 canvas结合js实现的非常酷的ascii animation动画特效

html5 canvas结合js实现的非常酷的ascii animation动画特效,http://www.zuidaima.com/share/1789567017372672.htm...
  • yaerfeng
  • yaerfeng
  • 2014年05月29日 09:49
  • 2869

发散式button按钮动画效果

今天从网上看到一个这样的效果,感觉很有创意,自己也搜集了一些资料,仿照着实现了一下。     下面就直接上源码:     首先看一下布局文件: [html] view pla...
  • heng615975867
  • heng615975867
  • 2013年10月30日 17:45
  • 1908

以动画实现 水波纹扩散效果.

今天在看到这一系列的博文: http://blog.csdn.net/harvic880925/article/details/50546884 http://blog.csdn.net/...
  • heming9174
  • heming9174
  • 2017年07月07日 15:50
  • 235

iOS之按钮散开框架AWESOMEMENU的简单使用

#import "ViewController.h" #import "AwesomeMenu.h" @interface ViewController ()AwesomeMenuDele...
  • u011146511
  • u011146511
  • 2017年04月02日 11:21
  • 575

jquery实现简单的轮播动画

css * { margin: 0; padding: 0; } u...
  • qq_17431235
  • qq_17431235
  • 2017年03月23日 10:23
  • 314

jQuery如何让鼠标经过菜单时显示子菜单并且鼠标经过子菜单时子菜单也显示

jQuery如何让鼠标经过菜单时显示子菜单并且鼠标经过子菜单时子菜单也显示 关键思路就是在父菜单栏的hover函数里再加入子菜单的hover函数 jq代码: $(function() {   ...
  • qq_35624642
  • qq_35624642
  • 2016年08月11日 19:32
  • 2088

史上最全-iOS开发中所用的动画 效果看这里就够了

前言 上次总结了多线程的用法,这次再复习下iOS动画的东西.这次依然先是以api为主,因为好多人还是api好多的东西还不会用.然后中间穿插些例子,例子和代码文章中都会有.因为篇幅比较长,先列一下大纲....
  • whjay520
  • whjay520
  • 2016年12月09日 14:11
  • 6364
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery实现子菜单散开动画
举报原因:
原因补充:

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