前幾日在利用JQuery做菜單滑動標記這個效果的時候,最後發現滑動條在我用鼠標快速滑動的時候,會出現滑動條延遲滑動,並且有卡頓的現象,相當影響體驗感受。不完美~
在幾番詢問下,得到了一個延時處理的解決方案,完美解決了這個問題。
思路:
在鼠標移入目標元素的時候,啓用定時操作,我目前設置的爲1/10秒,也就是說,當鼠標如果在目標元素區域停留了滿足我預設值的時間範圍內的話,我就執行動畫效果,否則沒有達到預設值的時間範圍便移出來目標元素的話,便取消延時執行的操作。簡單的說,滿足定時條件執行,否則取消操作。
具體代碼:
HTML 部分:
1: <ul id="nav">
2: <li><a href="#">menu1</a></li>
3: <li><a href="#">menu2</a></li>
4: <li><a href="#">menu3</a></li>
5: <li><a href="#">menu4</a></li>
6: <span id="slide_1" class="slidebar"></span>
7: </ul>
未添加延時操作的JS代碼:
1:
2: //導航菜單一監聽hover效果
3: $("#nav li a").mouseenter(function() {
4: $("#slide_1").animate( {
5: left : $(this).offset().left
6: },200);
7: });
添加延時操作的JS代碼:
1: //加延遲處理的導航條2
2: var tId = null,ele;//時間ID,當前元素
3: $("#nav1 li a").mouseenter(function() {
4: ele = $(this);
5: //設置定時操作,並記錄時間ID,用於清除定時器
6: tId = setTimeout(function() {
7: $("#slide_2").animate({left:$(ele).offset().left});
8: }, 100);
9: }).mouseout(function() {
10: //當鼠標移出目標元素時,清除定時操作
11: clearTimeout(tId);
12: });
Demo瀏覽地址:
http://xiaoweijs.duapp.com/demo/slidebar.html
總結
有時候對於效果過於追求的我們,像遇到了卡頓這種情況,心裏難免有些不完美的感覺。以上demo 和上面的那個例子只是延時處理的一種情況,其實在做很多導航滑動,向下滑動菜單效果,滾動條滑動等等效果的的時候我們經常會遇見,但是解決思路都是相同的。增加延遲處理,終止事件。注意到這裏終止事件的關鍵點在於clearTimeout上,先記錄定時器Id,不滿足條件則clear掉。
作者:Ziv小威
出處:http://www.cnblogs.com/zivxiaowei/
關於作者:專注於Java技術的程序員一枚,此外對JS開發保持着較高的興趣。愛好音樂,閱讀,FM等等。
本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接。
如有問題,可以郵件:[email protected]
微博:Ziv小威
分類: Javascript