制作滑动条菜单，如何延时处理滑动效果，避免动画卡顿
前几日在利用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掉。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2013-12-07 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读