专栏首页快乐八哥制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿

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

    前几日在利用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 条评论
登录 后参与评论

相关文章

  • 使用jQuery的animate方法制作滑动菜单

    周末看Ziv小威的博客《制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿》,参见地址:http://www.cnblogs.com/zivxiaowei/p/...

    八哥
  • iOS开发常用之网络

    GuangdongQi
  • iOS 优化界面流畅的技巧

    对象的创建会分配内存、调整属性、甚至还有读取文件等操作,比较消耗 CPU 资源。尽量用轻量的对象代替重量的对象,可以对性能有所优化。比如 CALayer 比 U...

    用户2491699
  • 【特斯拉组件】iOS高性能PageController

    1.组件介绍 Page是企鹅FM研发的分页组件,包括支持分页非交互切换(通过方法调用导航切换)和交互切换(屏幕的手势滑动),多个分页Controller和Vie...

    腾讯Bugly
  • Android系统16ms之内能做些什么

    如果你觉得你的应用界面出现卡顿不流畅的情况,不用怀疑,这很大原因是你没有在16ms完成你的工作。没错,16ms要完成你的工作,再慢点,用户一定会吐槽,然后狠心...

    open
  • uni-app支持微信wxs,性能大幅提升

    很多开发者都不明白为什么要造这种语言脚本的轮子出来,甚至很多开发者根本不知道它们的存在。

    CHB
  • 让你的网页更丝滑(一)

    前段时间,我将精力专注在Web性能领域;在这个领域下有个重要的课题是如何让网页更丝滑(流畅)。

    coder_koala
  • iOS 性能优化

    为了解释这个问题首先需要了解一下屏幕图像的显示原理。首先从 CRT 显示器原理说起,如下图所示。CRT 的电子枪从上到下逐行扫描,扫描完成后显示器就呈现一帧画面...

    赵哥窟
  • 滑屏 H5 开发实践九问 - 腾讯ISUX

    作为一个 UI工程师,接过很多类似的项目,也曾写过滑屏的插件,在经历了不同的需求的“洗礼”并踩过若干个坑之后,不禁反问自己...

    腾讯ISUX

扫码关注云+社区

领取腾讯云代金券