jQuery特效实战开发 - 实例：细微但舒服的导航文字变化

2015/06/09 23:58:56 | 作者：HTML5学堂（码匠） | 分类：jQuery实战开发 | 关键词：JQ特效,导航特效,动画,JQ,jQuery

JQ特效—导航文字细微变化

HTML5学堂：导航文字细微变化效果是我们在网站中常见的导航优化方式。在有些网站中，用户把鼠标移动在导航上时，导航生硬的hover效果极大影响了用户体验，导航用户体验优化就成了很关键的一部分。该效果的功能使用户把鼠标移入到相应导航标题时，标题文字向右缓慢运动，同时背景颜色发生变化（加深）。

效果需求

导航在HTML5有多种多样的优化方式，本文将为大家分享一款导航文字细微变化的导航优化效果。该款效果从视觉上看起来简单大方，当用户把鼠标移入到相应导航标题时，标题文字向右缓慢运动，同时背景颜色发生变化（加深）。

效果展示

效果实现

结构代码

<body>
<ul class="wrap clearfix">
<li>IE6浏览器常见兼容问题汇总</li>
<li>hasLayout</li>
<li>IE6横向外边距叠加的BUG</li>
<li>盒模型的怪异解析</li>
<li>变态的inline-block</li>
<li>letter-spacing与字体大小关系</li>
<li>IE6实现min-width效果</li>
<li>a的伪类:hover兼容问题</li>
<li>JavaScript事件详细讲解</li>
<li>FireFox与IE-JS脚本差异</li>
<li>如何获取body的scrollTop</li>
<li>文档碎片</li>
<li>旧浏览器支持HTML5新标签</li>
<li>获取各种浏览器可见窗口大小</li>
<li>JavaScript内存管理</li>
<li>JavaScript解析与执行机制</li>
</ul>
</body>

以上代码为导航文字细微变化效果的HTML结构，根据标签的语义性选择ul标签，子元素为li，用来表示列表项。

欢迎沟通交流~HTML5学堂

样式代码

<style>
.wrap {
width: 800px;
margin: 0 auto;
}
.wrap li {
float: left;
width: 190px;
height: 40px;
margin-right: 10px;
margin-bottom: 10px;
font-size: 14px;
line-height: 40px;
text-indent: 1em;
overflow: hidden;
cursor: pointer;
background: rgba(255, 219, 219, 0.4);
}
.wrap li:hover {
background: #FCC;
}
</style>

以上代码为导航文字细微变化效果的CSS样式代码，类名为wrap表示的是ul标签，设置了宽高及水平居中，并采用后代选择器，对子元素li进行样式的修改，li标签全部浮动，且设置了宽高、外边距、字体、背景色等基本样式。并给每个li标签设置了hover效果，鼠标移入的时候，背景颜色发生变化。

行为代码

<script>
$('.wrap li').hover(function(){
$(this).stop().animate({
"text-indent" : "2em"
})}, function(){
$(this).stop().animate({
"text-indent" : "1em"
})
})
</script>

以上代码为导航文字细微变化效果的jQuery行为代码，首先使用选择器选定类名为wrap下的每个li标签，并给li标签绑定了jQuery的hover事件，当鼠标移入的时候，执行以上代码的第3行和第4行。当前鼠标悬停在某个导航选项上时，该选项执行了jQuery的动画效果，.animate({"text-indent" : "2em"})表示的是jQuery自定义的动画，文字缩进的值变为2em，当鼠标移开该选项时，执行第6行~第8行代码，表示该导航选项的文字缩进值恢复至css中设置的1em。