使用jQuery的animate方法制作滑动菜单

简介:

是通过jQury的animate方法来写的一个交互效果,当然他 觉得动画有一些卡,所以他用延时处理的方法,避免动画卡,方法可以值得借鉴。我自己用hover方法,然后动画时间设置的更短,为100毫秒,动画运行起来,速度还行。

正好自己最近需要完成一个系统的导航条的滑动效果,具体是说,hover上导航条的一个选项,此时有一个背景(可以是纯色的背景或一张渐变的图片),实例我演示用的是纯色的背景,省的去弄图片背景。demo截图如下图所示:

image。Demo地址:http://liminjun.sinaapp.com/demo/navigation_animate/

代码如下,在代码进行注释说明:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
         body, #nav, #nav1  {
        margin:0px;
        
        }
        #navigation li {
            float:left;
            list-style-type:none;
            width:80px;
            height:50px;
        }
            #navigation li a.navlink {
             text-decoration:none;
             width:80px;
             height:25px;
             line-height:25px;
             display:inline-block;
             position:relative;
             overflow:hidden;
             text-align:center;
            }
            #navigation li .nav_title {
                position:absolute;
                top:0;
                z-index:1000;
            }
            #navigation li .hover_bg {
                position:absolute;
                top:25px;
                background-color:#5ab2ce;
                height:25px;
                width:80px;
                border:1px solid #ced7ce
                border-radius:4px;
            }
        </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

    <ul id="navigation">
        <li><a class="navlink" href="#">
            <div class="nav_title">博客园</div>
            <div class="hover_bg"></div>
            </a></li>
        <li><a class="navlink" href="#">
            <div class="nav_title">首页</div>
            <div class="hover_bg"></div>
            </a></li> 
        <li><a class="navlink" href="#">
            <div class="nav_title">博问</div>
            <div class="hover_bg"></div>
            </a></li>
        <li><a class="navlink" href="#">
            <div class="nav_title">闪存</div>
            <div class="hover_bg"></div>
            </a></li> 
    </ul>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#navigation li").hover(function () {
                
                $(this).find(".hover_bg").animate({

                    top:"0px"
                },"fast");
            }, function () {
                
                $(this).find(".hover_bg").animate({
          
                    top: "25px"
                }, "fast");
            });
        });
    </script>
</body>
</html>

 

工作原理大致:在a标签中设置2个div,一个是导航条的标题,另外一个就是要向上滑动的 层。为了一开始不出现滑动的层,所以对a标签的position设置为relative,并且overflow设置为hidden,不能对li进行 hidden,因为一般情况下,导航条下有下拉菜单。对2个div的position设置为absolute。然后在hover的方法里面,对 hover_bg这个层的top值进行动画变化,达到背景色块向上运动的一个交互效果。在动画时间设置上,我写的是“fast”,在3个浏览器上测试,动 画还算流畅,所以暂且没有考虑用延时去处理动画卡顿的问题。

PS:

1.估计是年底了,网页很多被运营商劫持了,当然也有可能是我的电脑中毒了。如下图所示的广告,我点击关闭按钮,直接跳转到一个游戏注册页面。无语了,截图为证,上海10M电信宽带。

运营商劫持

2.大家平时写博客的时候,或多或少都要插入代码,但是不要勾选“插入代码行数”,这个东西作用真的不大,而已博客园目前没有提供一个好的复制功能,直接copy代码过去,都带有行号,不方便其他用户修改和运行你的代码。插入代码

目录
相关文章
|
2月前
|
JavaScript CDN
jQuery方法小记
jQuery方法小记
29 0
|
2月前
|
JavaScript Serverless
jquery attr()方法
jquery attr()方法
21 0
|
18天前
|
JavaScript
jQuery 效果 - 滑动
jQuery 效果 - 滑动
16 5
|
1月前
|
JSON JavaScript 前端开发
jQuery获取json文件的方法
jQuery获取json文件的方法
18 2
|
22天前
|
JavaScript 程序员
老程序员分享:jquery方法总结
老程序员分享:jquery方法总结
14 0
|
2月前
|
JavaScript 前端开发 API
jquery的一些方法
jquery的一些方法
17 1
|
2月前
|
JavaScript 索引
|
2月前
|
JavaScript
|
2月前
|
JavaScript
jQuery制作滑动特效(1)
jQuery制作滑动特效(1)
|
2月前
|
JavaScript
jquery获取子元素的一些方法
jquery获取子元素的一些方法
20 0