手风琴效果无抖动的实现

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

 

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

 

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

 

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

 

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

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

 

DEMO：

 

 

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

 

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

 

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

 

 

转载于:https://www.cnblogs.com/liydotnet/archive/2013/05/31/3111545.html