jQuery: 动画案例二

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画案例二</title>
    <script type="text/javascript" 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>

jQuery: 动画案例二

猜你喜欢