想要的效果是：當鼠標放在界面上排列着的某個方塊形狀元素上時，改變該元素的背景透明度；
當鼠標滑過時，被滑過的元素就會形成透明度依次漸變的效果。
首先來設計一下需要用到的元素：
需實現效果的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效果的興趣和愛好。