窗帘式导航栏

来源：互联网发布：数据库安全性编辑：程序博客网时间：2024/04/27 20:57

窗帘式导航栏

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>

这里写图片描述

0 0