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

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

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

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

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

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

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

    DEMO:

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

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

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

  • 相关阅读:
    FPGA中亚稳态相关问题及跨时钟域处理
    异步FIFO---Verilog实现
    关于 FPGA 内部信号扇入扇出
    使用Xilinx IP核进行PCIE开发学习笔记
    aurora 64B/66B ip核设置与例程代码详解
    Verilog设计Valid-Ready握手协议
    【待写Java线程之线程终止 Interrupt 】
    【数据结构*转】斐波那契数列
    【数据结构】二分查找
    【待完善】资料记录
  • 原文地址:https://www.cnblogs.com/liydotnet/p/3111545.html
Copyright © 2011-2022 走看看