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


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

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

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

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

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

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

    DEMO:

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

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

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

  • 相关阅读:
    C#中d的??和?
    Android开发匹配字符笔记
    25个CSS3 渐变和动画效果教程
    精选PSD素材下载周刊【Goodfav PSD 20130720】
    25个吸引眼球的广告设计
    智能手机移动应用的8个趋势
    为网页设计师准备的30个使用的HTML5框架
    来自极客标签10款最新设计素材-系列十一
    九度OJ 1008最短路径问题
    最短路+邻接表+最小堆的C++代码实现
  • 原文地址:https://www.cnblogs.com/liydotnet/p/3111545.html
Copyright © 2020-2023  润新知