周末看Ziv小威的博客《制作滑动条菜单，如何延时处理滑动效果，避免动画卡顿》，参见地址：http://www.cnblogs.com/zivxiaowei/p/3462964.html。是通过jQury的animate方法来写的一个交互效果，当然他 觉得动画有一些卡，所以他用延时处理的方法，避免动画卡，方法可以值得借鉴。我自己用hover方法，然后动画时间设置的更短，为100毫秒，动画运行起来，速度还行。

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

。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>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

工作原理大致：在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代码过去，都带有行号，不方便其他用户修改和运行你的代码。

使用jQuery的animate方法制作滑动菜单的更多相关文章

  1. jQuery的animate方法在IE8下出现小问题

    今天修改网站的bug,把网页显示的几张图片给做成左右滑动的动画效果: 由于本身有一个demo可供参考,然后在此基础上进行修改,所以很快就搞定了,然后在chrome,firefox,IE9下分别进行测试 ...

  2. jQuery中animate()方法用法实例

    本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...

  3. jQuery 效果 - animate() 方法

    http://www.w3school.com.cn/jquery/effect_animate.asp 实例 改变 "div" 元素的高度: $(".btn1" ...

  4. jQuery的animate方法在IE7下出现小问题

    接上,今天接着修改网站的bug,还是网页的这几张图片,还是滑动效果,但在IE7下不但几张图片只显示一张,更别提滑动效果了,根本滑不了啊: 然后打开IE的F12工具,先看样式,再看滑动效果:本来应该显示 ...

  5. jquery之 animate()方法详解

    jQuery.animate() 函数详解 animate()函数用于执行一个基于css属性的自定义动画. 你可以为匹配的元素设置css样式,animate()函数将会执行一个从当前样式到指定的css ...

  6. 关于用jQuery的animate方法实现的动画在IE中失效的原因以及解决方法

    这几天在学jQuery,本身还只是一个新手,写了一个简单的动画--圆形头像的缩放.本身是用Firefox进行调试的,一切进行的很顺利,缩放可以按照预期执行,结果拿到IE上去之后,发现缩放动画失效了.后 ...

  7. jQuery动画animate方法使用介绍

    用于创建自定义动画的函数. 返回值:jQuery animate(params, [duration], [easing], [callback]) 如果使用的是“hide”.“show”或“togg ...

  8. jQuery的animate()方法做一个颜色的渐变

    需求:在1秒内,由一个颜色变到另一个颜色,不是1秒后再变色. <!DOCTYPE html> <html lang="en"> <head> & ...

  9. jquery的animate()方法也可设置非css属性

    如题,举例: $('body').animate({scrollTop:0}, 1500); $("body").animate({scrollTop:"-=" ...

随机推荐

  1. winfrom自定义滚动条

    panel或图片什么的跟着鼠标走,这里panel自己可以加背景图或直接搞个图就行了.为了演示清楚,有个滚动条控件做对比,与自定义的同步. using System; using System.Coll ...

  2. 纯css来实现提示框

    用js用多了,就疏忽了最基本的css了---用title属性来实现提示框.下面言归正传------如何用css实现提示框: 1.利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用 ...

  3. Redis 的安装与使用(linux)

    官方教程:http://www.redis.io/download 1.下载Redis # wget http://download.redis.io/releases/redis-3.0.4.tar ...

  4. IDEA插件

    Key Promoter 快捷键提示插件,帮助你快速记住快捷键.当你用鼠标完成某功能时,它会指示有相应的快捷键来完成刚才的功能,同时指导你为经常重复的操作建立快捷键. SerialVersionUID ...

  5. CF2.C（二分贪心）

    C. Road to Cinema time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  6. 对Java数组中去除重复项程序分析

    我作为一个Java菜鸟,只会用简单的办法来处理这个问题.如果有大神看到,请略过,感激不尽! 所以首先先分析这道题目:数组中重复的数据进行删除,并且要让数组里的数据按原来的顺序排列,中间不能留空. 既然 ...

  7. WebService的一些案例

    既然要实现WebService,首先先来创建一个Service类 package cn.happy.webservice; import javax.jws.WebService; import ja ...

  8. Mysql常用表操作 | 单表查询

    160905 常用表操作 1. mysql -u root -p 回车 输入密码   2. 显示数据库列表 show databases     3. 进入某数据库 use database data ...

  9. 浅谈Js对象的概念、创建、调用、删除、修改！

    一.我们经常困惑,对象究竟是什么,其实这是一种思维,一种意识上的东西,就像我们都说    世界是有物质组成的道理一样,理解了下面的几句话!对象也不是那么抽象!    1.javascript中的所有事 ...

  10. 如何让Maple中的数学引擎进入你的桌面应用程序和网站

    MapleNET数学服务套件将Maple 2015强大的数学引擎引入您的应用程序和网站.使用MapleNET,您可以添加数学计算和可视化功能到网页和桌面程序中,通过互联网/局域网分享“活”的Maple ...