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

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

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

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

                    <div id="divEquBooks">
                        <a >道岔转辙设备台账</a>
                        <a>道岔融雪设备台账</a>
                        <a>站内轨道电路设备台账</a>
                        <a>站内轨道电路器材台账</a>
                        <a>站内信号机设备台账</a>
                        <a>站内信号机器材台账</a>
                        <a>站内调车监控设备台账</a>
                        <a>区间信号机设备台账</a>
                        <a>区间信号机器材台账</a>
                        <a>区间轨道电路设备台账</a>
                        <a>站内信号电缆设备台账</a>
                        <a>区间信号电缆设备台账</a>
                        <a>继电器(防护盒、阻容盒)器材台账</a>
                        <a>变压器（整流器、室内隔离盒）器材台账</a>
                        <a>发送器（接收器、模拟网络）器材台账</a>
                        <a>计轴轨道电路室外设备台账</a>
                        <a>计轴轨道电路室内设备台账</a>
                        <a>电源屏设备台账</a>
                        <a>计算机联锁系统设备台账</a>
                        <a>CTC/TDCS系统设备台账</a>
                        <a>微机监测系统设备台账</a>
                        <a>智能故障诊断系统设备台账</a>
                        <a>控制台、人解盘、组合柜（架）设备台账</a>
                        <a>防雷器材台账</a>
                        <a>断路器（熔丝转换装置、阻容元器件）台账</a>
                        <a>室内信号报警装置台账</a>
                        <a>信号设备接地装置台账</a>
                        <a>轨道电路分路不良区段设备台账</a>
                        <a>轨道电路死区段设备台账</a>
                        <a>轨道电路侵限绝缘设备台账</a>
                        <a>轨道电路牵引回流吸上线设备台账</a>
                        <a>轨道电路横向连接线设备台账</a>
                        <a>机车信号车载设备台账</a>
                        <a>机车信号地面检测设备台账</a>
                        <a>应急设备、器材台账</a>
                        <a>机车信号应急设备、器材台账</a>
                    </div>        

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

#divEquBooks{ text-align:center; font-size:13px;}
#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代码如下：

<script type="text/javascript">
        $(function () {
            $("#divEquBooks a").mouseover(function () {
                if ($(this).is(":animated")) {
                    $(this).stop(true, false).fadeTo("fast", "0.5");
                } else {
                    $(this).fadeTo("fast", "0.5");
                }
            }).mouseleave(function () {
                $(this).fadeTo("fast", "1");
            });
        });
</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效果的兴趣和爱好。