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效果的兴趣和爱好。
