• 手风琴效果无抖动的实现


    本文中的例子仅限于等高的效果,不适合于不等高的情况。 

    最近一个项目中使用了类似手风琴,由于项目引入了JQ库,所以立刻想到用JQ的slideUp、slideDown这两个动画效果来实现。 

     以下的为第一个DEMO实现效果。

    在使用中,在使用发现,抖动比较厉害,抖动程度取决了浏览器以及电脑的配置。

    此手风琴的实现原因为 : 当前可见与点击非同一个时,进行操作的展开收缩操作,当前可见执行slideUp,点击执行slideDown,最终达到动画的效果,但是由于两个方法为异步操作,简单的理解为两个线程,由于JS的执行时间上的差异,靠成一个收缩比较快,一个比较慢,从而造成页面区域在抖动,放弃对slideUp、slideDown,后来采用jquery animate来实现(代码略),问题依然存在; 

    由于两个异步更新不一致造成抖动,必须将两个操作放置在一个操作中进行,于是自己采用线性(匀速运动)缓存算法来实现此操作。

    DEMO:

    在使用过程中,明显做到了步调一致不抖动。

    技术含量不高,仅供参考,家里电脑只有chrome和IE10,以上两浏览器测试正常,其他浏览器暂时没有测试,请见谅。

    其他代码换成原生JS来实现代码也不复杂,为了简便实现其他操作都采用JQ来实现 

  • 相关阅读:
    C#Table转成json工具
    设置npm注册表配置为淘宝镜像
    总结js面向对象调用的几种模式
    gitHub初使用
    对象的防篡改
    offsetWidth clientWidth scrollWidth的区别
    js中的new操作符
    setTimeot与setInterval定时器
    事件捕获 事件冒泡和事件委托
    一个页面从输入URL到加载完成,发生什么事
  • 原文地址:https://www.cnblogs.com/liydotnet/p/3111545.html
Copyright © 2020-2023  润新知