周末看Ziv小威的博客《制作滑動條菜單，如何延時處理滑動效果，避免動畫卡頓》，參見地址：http://www.cnblogs.com/zivxiaowei/p/3462964.html。是通過jQury的animate方法來寫的一個交互效果，當然他 覺得動畫有一些卡，所以他用延時處理的方法，避免動畫卡，方法可以值得借鑒。我自己用hover方法，然后動畫時間設置的更短，為100毫秒，動畫運行起來，速度還行。
正好自己最近需要完成一個系統的導航條的滑動效果，具體是說，hover上導航條的一個選項，此時有一個背景(可以是純色的背景或一張漸變的圖片)，實例我演示用的是純色的背景，省的去弄圖片背景。demo截圖如下圖所示：
。Demo地址：http://liminjun.sinaapp.com/demo/navigation_animate/
代碼如下，在代碼進行注釋說明：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> body, #nav, #nav1 { margin:0px; } #navigation li { float:left; list-style-type:none; width:80px; height:50px; } #navigation li a.navlink { text-decoration:none; width:80px; height:25px; line-height:25px; display:inline-block; position:relative; overflow:hidden; text-align:center; } #navigation li .nav_title { position:absolute; top:0; z-index:1000; } #navigation li .hover_bg { position:absolute; top:25px; background-color:#5ab2ce; height:25px; width:80px; border:1px solid #ced7ce border-radius:4px; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <ul id="navigation"> <li><a class="navlink" href="#"> <div class="nav_title">博客園</div> <div class="hover_bg"></div> </a></li> <li><a class="navlink" href="#"> <div class="nav_title">首頁</div> <div class="hover_bg"></div> </a></li> <li><a class="navlink" href="#"> <div class="nav_title">博問</div> <div class="hover_bg"></div> </a></li> <li><a class="navlink" href="#"> <div class="nav_title">閃存</div> <div class="hover_bg"></div> </a></li> </ul> <script type="text/javascript"> $(document).ready(function () { $("#navigation li").hover(function () { $(this).find(".hover_bg").animate({ top:"0px" },"fast"); }, function () { $(this).find(".hover_bg").animate({ top: "25px" }, "fast"); }); }); </script> </body> </html>
工作原理大致：在a標簽中設置2個div，一個是導航條的標題，另外一個就是要向上滑動的層。為了一開始不出現滑動的層，所以對a標簽的position設置為relative，並且overflow設置為hidden，不能對li進行hidden，因為一般情況下，導航條下有下拉菜單。對2個div的position設置為absolute。然后在hover的方法里面，對hover_bg這個層的top值進行動畫變化，達到背景色塊向上運動的一個交互效果。在動畫時間設置上，我寫的是“fast”，在3個瀏覽器上測試，動畫還算流暢，所以暫且沒有考慮用延時去處理動畫卡頓的問題。
PS：
1.估計是年底了，網頁很多被運營商劫持了，當然也有可能是我的電腦中毒了。如下圖所示的廣告，我點擊關閉按鈕，直接跳轉到一個游戲注冊頁面。無語了，截圖為證，上海10M電信寬帶。
2.大家平時寫博客的時候，或多或少都要插入代碼，但是不要勾選“插入代碼行數”，這個東西作用真的不大，而已博客園目前沒有提供一個好的復制功能，直接copy代碼過去，都帶有行號，不方便其他用戶修改和運行你的代碼。