最近在做公司的官网,首页用到了一些循环播放的动画,类似于轮播图。之前一般是直接套用插件,不常手动自己做这种,但是为了避免引入第三方库导致网页过于臃肿,所以就凭着自己掌握的 setTimeout 和 setInterval 的一些简单的知识就开始了制作。
要求:五个 div 依次切换。间隔3s
我的第一个想法是:每一个循环作为一个函数,每15s循环一次。
于是我的代码是这样的:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| var $el = $('#animat-icon ul'); var $elText = $('.animat-text'); var n = $('#animat-icon ul li').length;
function firstAnimat() { for (var i = 0; i < n; i++) { (function(i) { setTimeout(function() { if (i != 0) { $el.find('li').eq(i - 1).removeClass('fade'); $elText.eq(i - 1).removeClass('fade'); } else { $el.find('li').eq(n - 1).removeClass('fade'); $elText.eq(n - 1).removeClass('fade'); } $el.find('li').eq(i).addClass('fade'); $elText.eq(i).addClass('fade'); }, 3000 * i) })(i) } }
firstAnimat(); setInterval(function() { firstAnimat() }, 3000 * n);
|
fade
用于表现css3的动画,渐隐渐现啥的。
写完看了一眼效果实现了,并且我用到了面试的时候被问到的闭包的问题,我还自我感觉很良好。
然后问题就出现了,当离开当前标签页一段时间之后再回来,所有的文字重叠在了一起,然后依次迅速的执行了fade
定义的动画。我的第一想法是浏览器出于性能考虑,停止了我的动画。
这个原因可能是对的吧,因为没有人说的清楚是怎么回事儿。
百度之:
有人说:
DOM的操作也是消耗时间的,DOM的操作不顺,卡了下,时间就不对了,所以那样不是很稳定。
后面我改成了这样:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
| var $el = $('#animat-icon ul'); var $elText = $('.animat-text'); var n = $('#animat-icon ul li').length; var index = 0;
var timer;
function firstAnimat() { if (index != 0) { $el.find('li').eq(index - 1).removeClass('fade'); $elText.eq(index - 1).removeClass('fade'); } else { $el.find('li').eq(n - 1).removeClass('fade'); $elText.eq(n - 1).removeClass('fade'); } $el.find('li').eq(index).addClass('fade'); $elText.eq(index).addClass('fade');
index += 1; if(index>=n){ index = 0; } }
start();
function start(){ firstAnimat(); timer = setInterval(function() { firstAnimat() }, 3000); }
function stop(){ clearInterval(timer); }
window.addEventListener("blur", function(e) { stop() }), window.addEventListener("focus", function(e) { start() });
|
由于表现出来的是在我切换出去后,dom卡了几下,那我直接主动清除定时器不就好了。
问题暂时解决了,但是看起来还是很不优雅,相信随着我之后的学习,会一点一点完善起来的。