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

    前几日在利用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掉。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏计算机编程

SNS项目笔记<八>--Slides显示大图

在浏览大图的时候,我们总有些长图进行查看,在查看的过程中,我们难以一次性查看全部内容,于是我们想,如果在slides里面技能横滑切换,又能竖滑滚动查看就好了。这...

12520
来自专栏HTML5学堂

传统企业站开发 - 页面布局

前几期我们讲解了HTML+CSS的基本知识点,也带着大家分析过一些案例。从简单的页面结构到页面布局的实现,再到页面的优化。我们学习到的东西挺多的,但是在实战开发...

49760
来自专栏calmound

基于iframe的移动端嵌套

需求描述 上上周接到了新的项目,移动端需要做一个底部有五个导航,点击不同的导航页面主体显示不同的页面,其中两个页面是自己做,而另外三个页面是引用另外三个网址,其...

69560
来自专栏水击三千

浅谈JavaScript的事件(事件流)

   事件流描述的是从页面中接收事件的顺序。IE的事件流失事件冒泡,而Netspace的事件流失事件捕获。 事件冒泡   IE的事件流叫事件冒泡,即事件开始时,...

30880
来自专栏小俊博客

通过JS显示网站运行时间

17240
来自专栏CSDN技术头条

【独家】饿了么前端团队快应用背后研发实践

饿了么是一年前开始参与内测尝试开发快应用的,看着快应用平台一步一步的走过来,发展的越来越好。目前来说快应用开发条件已经比较完善,本次分享,为大家介绍前端开发人员...

27230
来自专栏极客慕白的成长之路

图标字体应用实践

使用的时候,通过background-position调整显示的位置,如下图所示:

24520
来自专栏沈唁志

使用php实现背景图上添加圆形logo

27340
来自专栏Youngxj

自适应导航网页源码

1.1K20
来自专栏小白课代表

更新|PC截图工具的最佳选择。

说到截图,最常用的可能就是QQ自带的截图功能了,简单流畅能满足我们的日常需求,依附于QQ,没有特殊的需求甚至不需要其他的截图软件。

17300

扫码关注云+社区

领取腾讯云代金券