周末看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. Windows服务安装

    运行cmd 输入:cd C:\Windows\Microsoft.NET\Framework\v4.0.30319  按回车 输入安装服务路径:如(installutil.exe D:\Project ...

  2. zookeeper工作原理、安装配置、工具命令简介

    1.Zookeeper简介 Zookeeper 是分布式服务框架,主要是用来解决分布式应用中经常遇到的一些数据管理问题,如:统一命名服务.状态同步服务.集群管理.分布式应用配置项的管理等等. 2.zo ...

  3. 前端工具之-- Sublime

    开始学习前端知识,做一些笔记来记录下- 之前学习都是使用的dw 现在前端开发工具既轻便功能也够强大. 下面记录下常用的前端工具: Sublime3:需要安装第三方包,一般 Atom:继承度非常好 VS ...

  4. HTML5 使用application cache 接口实现离线数据缓存

    1.配置缓存文件 cache manifest MIME TYPE:text/cache-manifest文件名称:name.appcache作用:用于配置需要缓存的文件 2.使用方法 在服务器上添加 ...

  5. qunit 前端脚本测试用例

    首先引用qunit 测试框架文件 <link rel="stylesheet" href="qunit-1.22.0.css"> <scrip ...

  6. Python3.5+selenium操作Chrome浏览器

    1.安装selenium 命令提示符下输入: pip install selenium 2.下载chromedriver 点击下载 3.将解压后的chromedriver.exe放到chrome浏览器 ...

  7. 对session的理解

    java Servlet API引入session 机制来跟踪客户的状态,session指的是在一段时间内,单个客户和web服务器之间一连串的交互过程,在一个session中,一个客户可能会多次请求同 ...

  8. C语言中的插入排序（2016-12-30）

    直接插入排序: 算法思想:假设待排序的记录存放在数组R[1--n]中,初始时,i=1,R[1]自成一个有序区,无序区为R[2--n].然后从i=2起直到i=n,依次将R[i]插入当前的有序区R[1.. ...

  9. Python 的简单图形界面编程【草】

    可用方案 Tkinter python官方附带,方便,但听说存在乱码问题 wxPython 更成熟一些,但需要额外安装(大约50M) pyQt 授权不够宽松 最短代码 Tkinter 待补充 wxPy ...

  10. Asp.Net Core 发布和部署（Linux + Jexus ）

    前言 在上篇文章中,主要介绍了 Dotnet Core Run 命令,这篇文章主要是讲解如何在 asp.net core 中对我们的已经完成的程序进行发布和部署. 有关如何使用 Nginx 进行部署, ...