jQuery: 动画案例二

最新推荐文章于 2024-03-29 10:49:50 发布

willard_cui

最新推荐文章于 2024-03-29 10:49:50 发布

阅读量273

点赞数 2

分类专栏： jQuery 前端

本文链接：https://blog.csdn.net/willard_cui/article/details/81416050

版权

前端同时被 2 个专栏收录

43 篇文章 3 订阅

订阅专栏

jQuery

18 篇文章 0 订阅

订阅专栏

动画：鼠标移动到一级菜单上时，打开对应的二级菜单，移出时关闭该二级菜单。

使用的jQuery方法：slideDown(), slideUp(), stop(), find(), mouseenter(), mouseleave()。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画案例二</title>
    <script src="../jquery.min.js"></script>
    <style type="text/css" rel="stylesheet">
        *{
            margin: 0;
            padding:0;
        }
        div{
            width: 400px;
            height: 50px;
            margin: 0 auto;
            top: 200px;
            
            position: relative;
        }
        ul{
            list-style-type: none;
        }
        ul li{
            float: left;
            width: 100px;
            height:30px;
            line-height: 30px;
            text-align:center;
            color: #fff;
            background: #0000ff;
        }
        .item ul{
            display: none;
        }
        .item ul li{
            border: 1px solid grey;
            background: #000092;
        }
    </style>
</head>
<body>
<div>
    <ul>
    <li class="item">首页
        <ul>
            <li>Home</li>
            <li>Home</li>
            <li>Home</li>
        </ul>
    </li>
    <li class="item">新闻
        <ul>
            <li>News</li>
            <li>News</li>
            <li>News</li>
        </ul>
    </li>
    <li class="item">列表
        <ul>
            <li>List</li>
            <li>List</li>
            <li>List</li>
        </ul>
    </li>
    <li class="item">联系
        <ul>
            <li>Tel</li>
            <li>Tel</li>
            <li>Tel</li>
        </ul>
    </li>
</ul>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $(".item").mouseenter(function(){
            $(this).find("ul").stop(false,true).slideDown(500);
        });
        $(".item").mouseleave(function () {//视频教程中使用的是mouseout()，但当鼠标移入二级
                                           //菜单时会出现bug，使用mouseleave()不会出现bug。
            $(this).find("ul").stop(false,true).slideUp(500);
        });
        /*$(".item").mouseover(function(){
            $(this).find("ul").stop(false,true).slideDown(500);
        }).mouseleave(function () {
            $(this).find("ul").stop(false,true).slideUp(500);
        });*/
    });

</script>
</body>

willard_cui

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery: 动画案例二

动画：鼠标移动到一级菜单上时，打开对应的二级菜单，移出时关闭该二级菜单。使用的jQuery方法：slideDown(), slideUp(), stop(), find(), mouseenter(), mouseleave()。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset...
复制链接

扫一扫