继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Jquery 导航栏动画-防BUG漏动

会当凌绝顶聪明
关注TA
已关注
手记 240
粉丝 36
获赞 122

 实现功能:

1、简单的Jquery二级导航栏,+上时间函数控制,能够防乱滑动的BUG漏动!

Jquery代码:

 

 <script type="text/javascript" language="javascript">


jQuery(document).ready(function($) {

    var delayTime = [];

    jQuery('#menu li').each(function(index) {

        $(this).hover(function() {

            var _self = this;

            delayTime[index] = setTimeout(function() {

                $(_self).find('.main').slideDown(200)

            },

            400)

        },

        function() {

            clearTimeout(delayTime[index]);

            $(".main").slideUp(200)

        })

    });

});


</script>


 

HTML代码:

 


<body>

<ul id="menu">

<li>导航1

    <div class="main">内容1</div>

    </li>

    <li>导航2

    <div class="main">内容2</div>

    </li>

    <li>导航3

    <div class="main">内容3</div>

    </li>

    <li>导航4

    <div class="main">内容4</div>

    </li>

</ul>

</body>


CSS代码:

 


<style type="text/css">

<!--

body{margin:0; padding:0;}

#menu {

float: left;

list-style-type: none;

}

#menu li {

height: 40px;

width: 200px;

float: left;

line-height: 40px;

text-align: center;

background-color: #ccc;

border-right-width: 1px;

border-right-style: solid;

border-right-color: #fff;

position: relative;

cursor:pointer;

font-family: "微软雅黑";

}

#menu li .main {

position: absolute;

left: 0px;

top: 0px;

background-color: #FF9;

height: 300px;

width: 200px;

display: none;

}

-->

</style>


 

 

 

 

-----上传了源文件,有需要的自己下载下来看看吧!

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP