html,body{overflow-x:hidden;}
ul,li{list-style: none;}
.nav{width:100%; height: 26px; overflow: hidden;}
.nav li{width: 100px; text-align: center; height: 26px; line-height: 26px; float: left; position: relative;}
.nav li a{text-decoration: none; color: #333;}
.nav li .bg{background: #168EED; position: absolute; top:; left:; width: 100%; height: 100%; z-index:-1; filter:alpha(opacity=0); opacity:;}
<ul class="nav">
<li><div class="bg"></div><a href="javaScript:;">li 1</a></li>
<li><div class="bg"></div><a href="javaScript:;">li 1</a></li>
<li><div class="bg"></div><a href="javaScript:;">li 1</a></li>
</ul>
$(function () {
var $lis = $(".nav li");
var $lisBg = $(".nav .bg");
$lis.hover(function () {
var $index = $(this).index();
$lisBg.eq($index).animate({"opacity": 1}, 200);
}, function () {
var $index = $(this).index();
$lisBg.eq($index).animate({"opacity": 0}, 300);
})
})

hover带有动画效果的导航的更多相关文章

  1. Swift 带有动画效果的TabBarItem

    额...貌似挺长时间没有总结新知识了,最近在看swift,之前swift刚出来的时候大体看了一遍,后来时间长了没看加之swift2.0做了比较大的调整,公司项目也不是用swift写的,也就没怎么看了, ...

  2. JavaScript实战(带收放动画效果的导航菜单)

    虽然有很多插件可用,但为了共同提高,我做了一系列JavaScript实战系列的实例,分享给大家,前辈们若有好的建议,请务必指出,免得误人子弟啊! ( 原创文章,转摘请注明:苏福:http://www. ...

  3. 纯CSS3带动画效果导航菜单

    随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...

  4. anime.js 实战:实现一个带有描边动画效果的复选框

    在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用.正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验.并且在现在的网页开发中,动画已经成为了一个设计的 ...

  5. iOS 开源一个高度可定制支持各种动画效果,支持单击双击,小红点,支持自定义不规则按钮的tabbar

    TYTabbarAnimationDemo 业务需求导致需要做一个tabbar,里面的按钮点击带有动画效果,tabbar中间的按钮凸出,凸出部分可以点击,支持badge 小红点等,为此封装了一个高度可 ...

  6. 自定义PopupWindow弹出框(带有动画)

    使用PopupWindow来实现弹出框,并且带有动画效果 首先自定义PopupWindow public class LostPopupWindow extends PopupWindow { pub ...

  7. 一个带动画效果的颜色选择对话框控件AnimatedColorPickerDialog

    android4.4的日历中选择日程显示颜色的时候有一个颜色选择对话框非常漂亮,模仿他的界面我实现了一个类似的对话框,而且带有动画效果. 代码的实现可讲的地方不多,主要是采用了和AlertDialog ...

  8. 实现鼠标hover动画效果自己理解的两种方法——练习笔记

    练习前端技术学院的任务,需要实现"导航栏中的链接,随着鼠标悬浮的位置,相应的链接下出现红色线段"的效果(如图1),我的理解有简易与稍显复杂一些的方法: 首先想到的就是直接利用伪元素 ...

  9. 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

随机推荐

  1. Sass入门:第四章

    1.加法 加法运算是Sass中运算的一种,在变量或属性中都可以做加法运算.如: .box { width: 20px + 8in; } 编译出来的CSS: .box { width: 788px; } ...

  2. java 截屏 类似于 QQ截屏

    package com.sun.test; import java.awt.AWTException;import java.awt.BorderLayout;import java.awt.Colo ...

  3. 浙大pat 1054 题解

    1054. The Dominant Color (20) 时间限制 100 ms 内存限制 32000 kB 代码长度限制 16000 B 判题程序 Standard Behind the scen ...

  4. Graph Algorithm

    1.定义 A graph consists of a set of vertices V and a set of edges E. Each edge is a pair (v, w), where ...

  5. crontab定时任务

    使用cron服务,用 service crond status 查看 cron服务状态,如果没有启动则 service crond start启动它, cron服务是一个定时执行的服务,可以通过cro ...

  6. 如何用Navicat for MySQL 将mysql中的数据库导出,导入。

    数据库导出 1.双击要导出的数据库,右键选转储SQL文件...,选择要保存的文件夹. 2.点击开始后,开始导出. 数据库导入 1.新建数据库,数据库的名字必须和导入的数据库文件一致. 2.在新建的数据 ...

  7. HDU1577-WisKey的眼神

    Problem Description WisKey的眼镜有500多度,所以眼神不大好,而且他有个习惯,就是走路喜欢看着地(不是为了拣钱哦^_^),所以大家下次碰见他的时候最好主动打下招呼,呵呵.但是 ...

  8. 常见的jquery一些效果

    1.CSS渐变:background: linear-gradient(to bottom right, #999 , #eee);

  9. RLE行程长度编码压缩算法

    在看emWIN的时候看到一个图片压缩的算法可以有效的对二值图(简单的2中颜色或者更多)进行压缩,压缩的效果可以节省空间而且不丢失信息! 特点 一种压缩过的位图文件格式,RLE压缩方案是一种极其成熟的压 ...

  10. ZUFE OJ 2288 God Wang I

    Description God Wang 是ZUFE的神犇,有一天他想到一种神奇的变换,并且将它命名为GodW变换 对于一个数字n,该变换后的值GodW(n)为,先令X=n 第一步,如果X为个位数,G ...