前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿

制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿

作者头像
八哥
发布2018-08-30 16:53:57
1.8K0
发布2018-08-30 16:53:57
举报
文章被收录于专栏:快乐八哥

    前几日在利用JQuery做菜单滑动标记这个效果的时候,最后发现滑动条在我用鼠标快速滑动的时候,会出现滑动条延迟滑动,并且有卡顿的现象,相当影响体验感受。不完美~

在几番询问下,得到了一个延时处理的解决方案,完美解决了这个问题。

思路:

    在鼠标移入目标元素的时候,启用定时操作,我目前设置的为1/10秒,也就是说,当鼠标如果在目标元素区域停留了满足我预设值的时间范围内的话,我就执行动画效果,否则没有达到预设值的时间范围便移出来目标元素的话,便取消延时执行的操作。简单的说,满足定时条件执行,否则取消操作。

具体代码:

HTML 部分:

代码语言:javascript
复制
   1:  <ul id="nav"> 
代码语言:javascript
复制
   2:   <li><a href="#">menu1</a></li>
代码语言:javascript
复制
   3:   <li><a href="#">menu2</a></li>
代码语言:javascript
复制
   4:   <li><a href="#">menu3</a></li>
代码语言:javascript
复制
   5:   <li><a href="#">menu4</a></li>
代码语言:javascript
复制
   6:   <span id="slide_1" class="slidebar"></span>
代码语言:javascript
复制
   7:  </ul>

未添加延时操作的JS代码:

代码语言:javascript
复制
   1:   
代码语言:javascript
复制
   2:   //导航菜单一监听hover效果
代码语言:javascript
复制
   3:  $("#nav li a").mouseenter(function() {
代码语言:javascript
复制
   4:        $("#slide_1").animate( {
代码语言:javascript
复制
   5:              left : $(this).offset().left
代码语言:javascript
复制
   6:        },200);
代码语言:javascript
复制
   7:  });

添加延时操作的JS代码:

代码语言:javascript
复制
   1:  //加延迟处理的导航条2
代码语言:javascript
复制
   2:  var tId = null,ele;//时间ID,当前元素
代码语言:javascript
复制
   3:  $("#nav1 li a").mouseenter(function() {
代码语言:javascript
复制
   4:      ele = $(this);
代码语言:javascript
复制
   5:     //设置定时操作,并记录时间ID,用于清除定时器
代码语言:javascript
复制
   6:      tId = setTimeout(function() {
代码语言:javascript
复制
   7:         $("#slide_2").animate({left:$(ele).offset().left});
代码语言:javascript
复制
   8:      }, 100);
代码语言:javascript
复制
   9:  }).mouseout(function() {
代码语言:javascript
复制
  10:         //当鼠标移出目标元素时,清除定时操作
代码语言:javascript
复制
  11:          clearTimeout(tId);
代码语言:javascript
复制
  12:  });
代码语言:javascript
复制
Demo浏览地址:
代码语言:javascript
复制
http://xiaoweijs.duapp.com/demo/slidebar.html
代码语言:javascript
复制
总结

  有时候对于效果过于追求的我们,像遇到了卡顿这种情况,心里难免有些不完美的感觉。以上demo 和上面的那个例子只是延时处理的一种情况,其实在做很多导航滑动,向下滑动菜单效果,滚动条滑动等等效果的的时候我们经常会遇见,但是解决思路都是相同的。增加延迟处理,终止事件。注意到这里终止事件的关键点在于clearTimeout上,先记录定时器Id,不满足条件则clear掉。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2013-12-07 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档