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


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

  • 相关阅读:
    TensorboardX的使用【有手就⭐系列】
    Python学习记录
    es 之 自定义 mapping(五)
    es 索引和文档 API (四)
    布尔查询(三)
    term 和 match 查询(二)
    使用 Python 批量将数据插入到 ES中
    【flask + vue 前后端分离博客】设计 User 用户(三)
    【flask + vue 前后端分离博客】使用 axios 访问接口(二)
    【flask + vue 前后端分离博客】创建第一个 Flask RESTFul(一)
  • 原文地址:https://www.cnblogs.com/zivxiaowei/p/3462964.html
Copyright © 2020-2023  润新知