Jquery 鼠标滑过时改变元素透明度的动画效果

想要的效果是：当鼠标放在界面上排列着的某个方块形状元素上时，改变该元素的背景透明度；

　　　　　　　当鼠标滑过时，被滑过的元素就会形成透明度依次渐变的效果。

首先来设计一下需要用到的元素：

需实现效果的HTML

 1                     <div id="divEquBooks">
 2                         <a >道岔转辙设备台账</a>
 3                         <a>道岔融雪设备台账</a>
 4                         <a>站内轨道电路设备台账</a>
 5                         <a>站内轨道电路器材台账</a>
 6                         <a>站内信号机设备台账</a>
 7                         <a>站内信号机器材台账</a>
 8                         <a>站内调车监控设备台账</a>
 9                         <a>区间信号机设备台账</a>
10                         <a>区间信号机器材台账</a>
11                         <a>区间轨道电路设备台账</a>
12                         <a>站内信号电缆设备台账</a>
13                         <a>区间信号电缆设备台账</a>
14                         <a>继电器(防护盒、阻容盒)器材台账</a>
15                         <a>变压器（整流器、室内隔离盒）器材台账</a>
16                         <a>发送器（接收器、模拟网络）器材台账</a>
17                         <a>计轴轨道电路室外设备台账</a>
18                         <a>计轴轨道电路室内设备台账</a>
19                         <a>电源屏设备台账</a>
20                         <a>计算机联锁系统设备台账</a>
21                         <a>CTC/TDCS系统设备台账</a>
22                         <a>微机监测系统设备台账</a>
23                         <a>智能故障诊断系统设备台账</a>
24                         <a>控制台、人解盘、组合柜（架）设备台账</a>
25                         <a>防雷器材台账</a>
26                         <a>断路器（熔丝转换装置、阻容元器件）台账</a>
27                         <a>室内信号报警装置台账</a>
28                         <a>信号设备接地装置台账</a>
29                         <a>轨道电路分路不良区段设备台账</a>
30                         <a>轨道电路死区段设备台账</a>
31                         <a>轨道电路侵限绝缘设备台账</a>
32                         <a>轨道电路牵引回流吸上线设备台账</a>
33                         <a>轨道电路横向连接线设备台账</a>
34                         <a>机车信号车载设备台账</a>
35                         <a>机车信号地面检测设备台账</a>
36                         <a>应急设备、器材台账</a>
37                         <a>机车信号应急设备、器材台账</a>
38                     </div>

再来设计一下元素的样式：

HTML元素的样式

1 #divEquBooks{ text-align:center; font-size:13px;}
2 #divEquBooks a{ border:1px solid green; float:left; width:100px; height:65px; margin:7px 12px; cursor:pointer; padding-top:35px; display:block; text-decoration:none; color:White; background-color:#0386B9;}

最后，必须在页面中引用一个Jquery库，然后就该实现我们的效果啦，Jquery代码如下：

鼠标滑过时Jquery效果

 1 <script type="text/javascript">
 2         $(function () {
 3             $("#divEquBooks a").mouseover(function () {
 4                 if ($(this).is(":animated")) {
 5                     $(this).stop(true, false).fadeTo("fast", "0.5");
 6                 } else {
 7                     $(this).fadeTo("fast", "0.5");
 8                 }
 9             }).mouseleave(function () {
10                 $(this).fadeTo("fast", "1");
11             });
12         });
13 </script>

总体来说，想实现这个效果所用到的Jquery事件是"mouseover"和"mouseleave",

用is(":animated")判断一个元素是否正在处于动画效果状态。

用stop(true, false)来处理未完成的动画，第一个参数为true，表示将正在进行的动画直接达到末尾状态；第二个参数false表示不清空元素当前正在进行的动画之后那些尚未进行的动画效果。

用fadeTo("fast", "0.5")来调整元素的透明度，其中第一个参数“fast”表示动画执行的时间为200毫秒，可以根据个人需要把第一个参数值设置为fast,normal,slow,分别对应200，400，600毫秒，也可以把第一个参数设置为数值类型，代表执行动画所需的毫秒数；第二个参数“0.5”表示元素的透明度，取值范围在0~1之间。

至此，这个简单的Jquery 鼠标滑过时改变元素透明度的动画效果就完成了，希望能够抛砖引玉，激发各位对Jquery效果的兴趣和爱好。