zoukankan      html  css  js  c++  java
  • 手风琴效果无抖动的实现

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

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

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

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

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

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

    DEMO:

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

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

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

  • 相关阅读:
    linux_进程管理
    Linux-日志管理
    Httpd
    Linux-源码安装包管理
    Linux-计划任务管理
    Linux-LVM管理
    Linux-系统磁盘管理
    Linux-yum工具的使用
    Linux-rpm包管理
    Linux-网络进阶管理
  • 原文地址:https://www.cnblogs.com/liydotnet/p/3111545.html
Copyright © 2011-2022 走看看