周末看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. Font Squirrel

    Font Squirrel FontSquirrel:国外免费字体下载网是一个提供高质量商业字体下载网站,提供海量的英文字体库,用户可以随意下载并应用于各种商业用字,无需考虑其版权问题. 官网地址:h ...

  2. 安装zabbix-3.0.3+nginx-1.10.1+php-5.6.22

    好久没有接触监控类的软件了,今天抽空搭建了下最新的版本 首先系统环境 zabbix-server-1 192.168.11.11   centos6.7 mysql-server    192.168 ...

  3. css单位：em，rem解释

    em:所有浏览器都符合:1em=16px;1.具有继承性2.em的根元素是body,当设置了根元素的大小时,大小是定义的数字乘以根元素定义的大小值 rem:1rem=16pxrem不具有继承性,其根元 ...

  4. C#按照指定长度分割中英文字符串

    最近有一个需求:玩家发的不同长度文字,需要自适应行数. 初步实现想法很简单,直接获取字符数均分行数,再利用string.substring()切割即可.但是显而易见,由于一般字体下,中文显示宽度一般是 ...

  5. *HDU1850 博弈

    Being a Good Boy in Spring Festival Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32 ...

  6. centos下python中添加easygui模块

    前提:python中要集成Tkinter,Tkinter模块("Tk 接口")是Python的标准Tk GUI工具包的接口.Tk和Tkinter可以在大多数的Unix平台下使用,同 ...

  7. css自适应宽度高级写法：一行多列~~~某些列的宽度是固定值

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAxgAAACdCAIAAAC4iknFAAAgAElEQVR4nO2d3VsTV7uH51/wqhKotn

  8. Java中堆内存和栈内存详解

    Java把内存分成两种,一种叫做栈内存,一种叫做堆内存 在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配.当在一段代码块中定义一个变量时,java就在栈中为这个变量分配内存空间 ...

  9. Ajax请求

    <!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...

  10. 一起来测试天兔Lepus3.8 Beta版本的MSSQL部分

    一起来测试天兔Lepus3.8 Beta版本的MSSQL部分 产品介绍:http://www.lepus.cc/下载地址:http://www.lepus.cc/soft/18手册地址:http:// ...