【JQ】JQ Animation-Slide应用

最新推荐文章于 2021-06-28 07:48:47 发布

原创最新推荐文章于 2021-06-28 07:48:47 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #界面 #动画 #前端 #应用

●HTML 同时被 2 个专栏收录

5 篇文章

订阅专栏

●CSS

3 篇文章

订阅专栏

本文介绍使用jQuery实现菜单项点击后的子菜单滑动动画效果，包括HTML结构、CSS样式和JavaScript交互代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在前面的

由于在前端界面中经常需要用到JQ中的一些动画操作来实现对界面的美化，接下来我就把在JQ中实现菜单滑动的动画效果总结一下，需要的朋友可以自行复制。

HTML

我们就用最基本的纵向菜单的下拉滑动来进行一个小DEMO的操作。

效果展示

这里写图片描述

对其中一个菜单点击之后就会出现一个下拉菜单的滑动，然后显示完整菜单。

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>菜单滑动效果</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" rel="stylesheet" href="css/menu.css" />
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/menu.js"></script>
    </head>
    <body>
        <ul>
            <li class="main">
                    <a href="#">菜单项1</a>
                <ul>
                    <li>
                        <a href="#">子菜单项11</a>
                    </li>
                    <li>
                        <a href="#">子菜单项12</a>
                    </li>
                </ul>
            </li>
            <li class="main">
                <a href="#">菜单项2</a>
                <ul>
                    <li>
                        <a href="#">子菜单项21</a>
                    </li>
                    <li>
                        <a href="#">子菜单项22</a>
                    </li>
                </ul>
            </li>
            <li class="main">
                <a href="#">菜单项3</a>
                <ul>
                    <li>
                        <a href="#">子菜单项31</a>
                    </li>
                    <li>
                        <a href="#">子菜单项32</a>
                    </li>
                </ul>
            </li>
        </ul>
    </body>
</html>

CSS

代码

ul, li {
    /*清除ul和li上默认的小圆点*/
    list-style: none;
}
ul {
    /*清除子菜单的缩进值*/
    padding: 0;
    margin: 0;
}
.main, .hmain {
    background-image: url(../title.gif);
    background-repeat: repeat-x;
    width: 120px;
}
li {
    background-color: #EEEEEE;
}
a {
    /*取消所有的下划线*/
    text-decoration: none;
    padding-left: 20px;
    display: block;
    display: inline-block;
    width: 100px;
    padding-top: 3px;
    padding-bottom: 3px;
}
.main a, .hmain a {
    color: white;
    background-image: url(../collapsed.gif);
    background-repeat: no-repeat;
    background-position: 3px center;
}
.main li a, .hmain li a {
    color: black;
    background-image: none;
}
.main ul, .hmain ul {
    display: none;
}
.hmain {
    float: left;
    margin-right: 1px;
}

JS

代码

$(document).ready(function(){
    //页面中的DOM已经装载完成时，执行的代码
    $(".main > a").click(function(){
        //找到主菜单项对应的子菜单项
        var ulNode = $(this).next("ul");
        ulNode.slideToggle();
        changeIcon($(this));
    });
    $(".hmain").hover(function(){
        $(this).children("ul").slideDown();
        changeIcon($(this).children("a"));
    },function(){
        $(this).children("ul").slideUp();
        changeIcon($(this).children("a"));
    });
});

/**
 * 修改主菜单的指示图标
 */
function changeIcon(mainNode) {
    if (mainNode) {
        if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
            mainNode.css("background-image","url('expanded.gif')");
        } else {
            mainNode.css("background-image","url('collapsed.gif')");
        }
    }
}