javascript - Jquery 动画卡在图像中间的动画中

Question

我在 FullPage.js 网站上使用了一个回调函数，该函数调用一个函数在 20 个 div 上运行一系列动画。问题是它有时有效，但经常会中断。我已经意识到它在 3 张特定的幻灯片上中断了。他们每个人都有幻灯片轮播。我有理由相信这些都以某种形式或形式受到指责。

但是，当我将幻灯片显示 div 设置为显示:无时，动画效果完美。

您可以在此处查看有问题的网站(不能正常工作的幻灯片是两个“关于”部分和“图库”部分):

http://jeanhules.com/projects/greenmonster/

我是不是忽略了什么？我已经编写了一段时间的代码，但从未经历过这样的事情。

可以在此处找到小块动画的示例代码:

这是卡住的动画代码:

(function hl() {
  var li = $('.active .tile'),
    r  = Math.floor(Math.random() * li.length),
    h  = li.eq(r).hasClass('active'),
    w  = li.filter('.active').length;

  li.eq(r).addClass('active');
  li.eq(r).find('.tileimage').animate({ top: 0 }, 300, 'easeOutBounce', function () {});

  if (w < li.length) setTimeout(hl, h ? 0 : 100);
})();

谢谢。已为帮助我解决此问题的任何人准备好提示。

Answer 1

刚刚检查了您的 fiddle ，您的第二个函数 h1 似乎在大约 1000 毫秒内完成了循环，这在 masterAdd() 的超时为 1000 毫秒但当您将其增加到 1500 毫秒时 h1 的 while 循环过早结束。如果将 h1 的 setTimeout 函数增加到 150，它应该为所有图 block 设置动画。

fork 你的 fiddle 并测试它:http://jsfiddle.net/us6n382k/

if (w < li.length) setTimeout(hl, h ? 0 : 150); //was 100

希望对您有所帮助!