hover带有动画效果的导航
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带有动画效果的导航的更多相关文章
- Swift 带有动画效果的TabBarItem
额...貌似挺长时间没有总结新知识了,最近在看swift,之前swift刚出来的时候大体看了一遍,后来时间长了没看加之swift2.0做了比较大的调整,公司项目也不是用swift写的,也就没怎么看了, ...
- JavaScript实战(带收放动画效果的导航菜单)
虽然有很多插件可用,但为了共同提高,我做了一系列JavaScript实战系列的实例,分享给大家,前辈们若有好的建议,请务必指出,免得误人子弟啊! ( 原创文章,转摘请注明:苏福:http://www. ...
- 纯CSS3带动画效果导航菜单
随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多 ...
- anime.js 实战:实现一个带有描边动画效果的复选框
在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用.正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验.并且在现在的网页开发中,动画已经成为了一个设计的 ...
- iOS 开源一个高度可定制支持各种动画效果,支持单击双击,小红点,支持自定义不规则按钮的tabbar
TYTabbarAnimationDemo 业务需求导致需要做一个tabbar,里面的按钮点击带有动画效果,tabbar中间的按钮凸出,凸出部分可以点击,支持badge 小红点等,为此封装了一个高度可 ...
- 自定义PopupWindow弹出框(带有动画)
使用PopupWindow来实现弹出框,并且带有动画效果 首先自定义PopupWindow public class LostPopupWindow extends PopupWindow { pub ...
- 一个带动画效果的颜色选择对话框控件AnimatedColorPickerDialog
android4.4的日历中选择日程显示颜色的时候有一个颜色选择对话框非常漂亮,模仿他的界面我实现了一个类似的对话框,而且带有动画效果. 代码的实现可讲的地方不多,主要是采用了和AlertDialog ...
- 实现鼠标hover动画效果自己理解的两种方法——练习笔记
练习前端技术学院的任务,需要实现"导航栏中的链接,随着鼠标悬浮的位置,相应的链接下出现红色线段"的效果(如图1),我的理解有简易与稍显复杂一些的方法: 首先想到的就是直接利用伪元素 ...
- 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...
随机推荐
- Sass入门:第四章
1.加法 加法运算是Sass中运算的一种,在变量或属性中都可以做加法运算.如: .box { width: 20px + 8in; } 编译出来的CSS: .box { width: 788px; } ...
- java 截屏 类似于 QQ截屏
package com.sun.test; import java.awt.AWTException;import java.awt.BorderLayout;import java.awt.Colo ...
- 浙大pat 1054 题解
1054. The Dominant Color (20) 时间限制 100 ms 内存限制 32000 kB 代码长度限制 16000 B 判题程序 Standard Behind the scen ...
- 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 ...
- crontab定时任务
使用cron服务,用 service crond status 查看 cron服务状态,如果没有启动则 service crond start启动它, cron服务是一个定时执行的服务,可以通过cro ...
- 如何用Navicat for MySQL 将mysql中的数据库导出,导入。
数据库导出 1.双击要导出的数据库,右键选转储SQL文件...,选择要保存的文件夹. 2.点击开始后,开始导出. 数据库导入 1.新建数据库,数据库的名字必须和导入的数据库文件一致. 2.在新建的数据 ...
- HDU1577-WisKey的眼神
Problem Description WisKey的眼镜有500多度,所以眼神不大好,而且他有个习惯,就是走路喜欢看着地(不是为了拣钱哦^_^),所以大家下次碰见他的时候最好主动打下招呼,呵呵.但是 ...
- 常见的jquery一些效果
1.CSS渐变:background: linear-gradient(to bottom right, #999 , #eee);
- RLE行程长度编码压缩算法
在看emWIN的时候看到一个图片压缩的算法可以有效的对二值图(简单的2中颜色或者更多)进行压缩,压缩的效果可以节省空间而且不丢失信息! 特点 一种压缩过的位图文件格式,RLE压缩方案是一种极其成熟的压 ...
- ZUFE OJ 2288 God Wang I
Description God Wang 是ZUFE的神犇,有一天他想到一种神奇的变换,并且将它命名为GodW变换 对于一个数字n,该变换后的值GodW(n)为,先令X=n 第一步,如果X为个位数,G ...