html animation 无限循环,javascript – 如何创建一个有效的无限循环挥动文本动画？...

这是我试图创建的效果(

JSFiddle)：

$('.header h1 span').each(function() { // each letter is contained inside a element

var that = $(this);

setTimeout(function() {

that.animate({

top: "-10px"

},animateTime / 2)

.animate({

top: "10px"

},animateTime / 2);

},that.index() * 100);

});

结果：

它似乎很成功.但是,在切换标签后,我遇到了这样的问题,然后又回来了：

在上面的小提琴中,我试图通过在选项卡未聚焦时停止动画来“修复”这个问题.这比我没有检查标签无焦点时更好,但它仍然有问题.这是我用来做的代码：

var running = true;

document.addEventListener('visibilitychange',function(){

console.log("Running:" + running);

running = !document.hidden;

if(!running) clearQueues();

})

如果用户从标签中花费的时间不到几秒钟,动画看起来就像是第二个GIF,我没有办法避免这种情况.我尝试过使用requestAnimationFrame(),但我无法弄清楚如何使其正常运行.

所以,我的问题是：如何防止动画受到未聚焦选项卡的影响？

奖励积分(比喻)如果你能帮我在移动设备上提高效率的话.