窗帘式导航栏

最新推荐文章于 2020-03-21 19:54:58 发布

原创最新推荐文章于 2020-03-21 19:54:58 发布 · 601 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#导航栏

jQuery 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的窗帘式导航栏动画效果。通过鼠标悬停事件，结合setTimeout和animate方法，使得导航栏项能够依次展开和收起，为用户提供了一种新颖的交互体验。

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

窗帘式导航栏

setTimeout()
$(obj).hover(over,out)
1. over:鼠标移到元素上要触发的函数
2. out:鼠标移出元素要触发的函数
$(obj).stop([queue],[clearQueue],[jumpToEnd])
1. queue:用来停止动画的队列名称
2. clearQueue:如果设置成true，则清空队列。可以立即结束动画。
3. jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。
$(obj).animate(params,[speed],[easing],[fn])
1. params:一组包含作为动画属性和终值的样式属性和及其值的集合
2. speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
3. easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”.
4. fn:在动画完成时执行的函数，每个元素执行一次。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--<link rel="stylesheet" href="public/css/bootstrap.min.css" >-->
    <!--<link rel="stylesheet" href="public/css/bootstrap-theme.min.css" >-->
    <script src="public/js/jquery-1.11.2-min.js"></script>
    <!--<script src="public/js/bootstrap.min.js"></script>-->
    <style>
        *{
            margin:0;
            padding:0;
        }
        .d1{
            overflow: hidden;
        }
        ul{
            padding:0;
            list-style-type: none;
            /*margin:auto;*/
            width:80px;
            float:right;
            margin-right:-70px;
        }
        ul li{
            border-bottom:1px solid white;
            background-color: deepskyblue;
            position: relative;
        }
        ul li a{
            border-left:10px solid green;
            display:block;
            padding:10px 0;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="d1">
    <ul>
        <li><a href="#">菜单一</a></li>
        <li><a href="#">菜单二</a></li>
        <li><a href="#">菜单三</a></li>
        <li><a href="#">菜单四</a></li>
        <li><a href="#">菜单五</a></li>
        <li><a href="#">菜单六</a></li>
        <li><a href="#">菜单七</a></li>
        <li><a href="#">菜单八</a></li>
    </ul>
</div>
<script>
    $(function(){
        var set;
        //hover(over,out)over:鼠标移到元素上要触发的函数,out:鼠标移出元素要触发的函数
//.stop()停止所有在指定元素上正在运行的动画。:如果设置成true，则清空队列。可以立即结束动画。

        $("ul").hover(function(){
            set=setTimeout(function(){
                $("ul li").each(function(i){
                    var obj=$(this);
                    obj.stop(true);
                    setTimeout(function(){
                        obj.animate({right:"70px"},500)
                    },i*50)
                })
            },200)//这个200主要是控制鼠标不断的快进快出.造成画面段节影响，
        },function(){
            if(set){
                clearInterval(set);
            }
            $("ul li").each(function(i){
                var obj=$(this);
                obj.stop();
                setTimeout(function(){
                    obj.animate({right:0},500)
                },i*50)
            })
        })
    })
</script>
</body>
</html>

这里写图片描述