Jquery实现子菜单散开动画

淡淡的烟草味﹌ 2022-06-08 00:44 200阅读 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 条评论，200人围观）

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

相关阅读

相关带有子菜单的 jQuery 侧边栏菜单

网站的导航在增强用户体验和引导访问者到达所需内容方面起着至关重要的作用。组织和呈现导航选项的一种流行方法是使用侧边栏菜单。通过子菜单的附加功能，带有子菜单的 jQuery 侧边

曾经终败给现在/ 2023年10月13日 08:06/ 0 赞/ 40 阅读

相关 jQuery实现折叠菜单

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

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

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

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

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

相关 SASS实现圆形动画菜单

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

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

相关 Android圆形散开动画

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

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

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

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

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

相关 CSS3方式实现动画菜单

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

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

相关 jQuery方式实现动画菜单

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

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

相关 jQuery实现三级菜单

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

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

相关 Jquery实现菜单激活

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

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