本文中的例子仅限于等高的效果,不适合于不等高的情况。
最近一个项目中使用了类似手风琴,由于项目引入了JQ库,所以立刻想到用JQ的slideUp、slideDown这两个动画效果来实现。
以下的为第一个DEMO实现效果。
在使用中,在使用发现,抖动比较厉害,抖动程度取决了浏览器以及电脑的配置。
此手风琴的实现原因为 : 当前可见与点击非同一个时,进行操作的展开收缩操作,当前可见执行slideUp,点击执行slideDown,最终达到动画的效果,但是由于两个方法为异步操作,简单的理解为两个线程,由于JS的执行时间上的差异,靠成一个收缩比较快,一个比较慢,从而造成页面区域在抖动,放弃对slideUp、slideDown,后来采用jquery animate来实现(代码略),问题依然存在;
由于两个异步更新不一致造成抖动,必须将两个操作放置在一个操作中进行,于是自己采用线性(匀速运动)缓存算法来实现此操作。
DEMO:
在使用过程中,明显做到了步调一致不抖动。
技术含量不高,仅供参考,家里电脑只有chrome和IE10,以上两浏览器测试正常,其他浏览器暂时没有测试,请见谅。
其他代码换成原生JS来实现代码也不复杂,为了简便实现其他操作都采用JQ来实现