Jquery实现子菜单散开动画

淡淡的烟草味﹌ 2022-06-08 00:44 172阅读 0赞

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

## 显示效果 ##

![SouthEast][]

[SouthEast]: /images/20220608/9ddec89c458c49b1aad2350ea0bd1e50.png

发表评论取消回复

表情：

评论列表（有 0 条评论，172人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery实现折叠菜单

jQuery实现折叠菜单今天在观看李南江老师的jQuery视屏时，正好遇到老师在讲jQuery实现折叠菜单，但是老师的折叠菜单不是很完善在这里我对老师的代

小鱼儿/ 2023年06月15日 06:38/ 0 赞/ 22 阅读

相关用jQuery实现的菜单下划线动画效果

前几天在网站看到一个菜单下划线动画效果感觉不错.不过他的效果有缺陷,鼠标快速移动时会导致动画停不下来. 自己拿jQuery写了一个,解决了上面的问题,而且菜单的独立性比较好,

清疚/ 2022年09月19日 04:17/ 0 赞/ 227 阅读

相关 SASS实现圆形动画菜单

好的，SASS实现的圆形动画菜单，效果和主要原理如下图所示。 ![SouthEast][] [在线研究][Link 1]点这里，[下载收藏][Link 2]点这里。

﹏ヽ暗。殇╰゛Y/ 2022年08月26日 01:18/ 0 赞/ 182 阅读

相关 Android圆形散开动画

1 先看效果 ![Center][] 主要就是五颗按钮向五个方向散开（我这里是按钮，也可以放成其它控件）。 2 实现 2.1 Andr

川长思鸟来/ 2022年08月02日 09:34/ 0 赞/ 207 阅读

相关 jQuery实现左侧分类菜单

打开京东、淘宝等各大类网站，最常见的就是左侧分类菜单栏了，既然这么常见的功能，那么应该怎么去实现它呢，接下来，我会在js中介绍两种实现方式，一种是引入jQuery的实现方式，一

我会带着你远行/ 2022年07月14日 04:38/ 0 赞/ 256 阅读

相关 Jquery实现子菜单散开动画

> Jquery的`animate()`方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画

淡淡的烟草味﹌/ 2022年06月08日 00:44/ 0 赞/ 173 阅读

相关 CSS3方式实现动画菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

淡淡的烟草味﹌/ 2022年01月27日 12:07/ 0 赞/ 240 阅读

相关 jQuery方式实现动画菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

太过爱你忘了你带给我的痛/ 2022年01月27日 12:07/ 0 赞/ 226 阅读

相关 jQuery实现三级菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

川长思鸟来/ 2022年01月27日 05:45/ 0 赞/ 329 阅读

相关 Jquery实现菜单激活

> 当点击某个菜单的时候，将其点击的当前菜单激活，其他菜单失去激活的状态 HTML代码 <div class="ui secondary vertical po

曾经终败给现在/ 2022年01月07日 13:43/ 0 赞/ 324 阅读