Question

我在FullPage.js网站上使用了一个回调函数，它调用一个函数在20个div上运行一系列动画。问题是它有时可行，但往往会中断。我已经意识到它打破了3个特定的幻灯片。他们每个人都有幻灯片旋转木马。我有理由相信这些应该归咎于某种形式或形式。

然而，当我将幻灯片显示div设置为display：none时，动画效果完美无瑕。

你可以在这里看到有问题的网站（幻灯片无法正常工作的是两个关于部分和图库部分）：

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

刚刚检查了你的小提琴，似乎你的第二个函数h1在大约1000毫秒内完成循环，当masterAdd（）超时为1000毫秒但是当你将它增加到1500毫秒h1时，循环结束过早。如果将h1的setTimeout函数增加到150，它应该为所有图块设置动画。

分叉你的小提琴并测试出来：http://jsfiddle.net/us6n382k/

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

希望有所帮助！

Answer 2

我感觉这与以下事实有关：当您随机选择要设置动画的图块时，它可能是已经设置动画的图块，但动画尚未完成。您可以使用:not()选择器来避免：

function randomInt(count) {
    return Math.floor(Math.random() * count);
}

(function activateSlide() {
    var $inactiveSlides = $('[id^="slide"]:not(.active)'),
        count  = $inactiveSlides.length;
    $inactiveSlides.eq(randomInt(count)).addClass('active');
    if (count > 1) {
        setTimeout(activateSlide, 500);
    }
})();

(function activateTile() {
    var $inactiveTiles = $('.active').find('.tile:not(.active)'),
        count  = $inactiveTiles.length;
    $inactiveTiles.eq(randomInt(count)).addClass('active').find('.tileimage').animate({ top: 0 }, 300, 'easeOutBounce');
    if (count > 1) {
        setTimeout(activateTile, 100);
    }
})();

jsfiddle

Jquery动画在图像中被卡在动画中

2 个答案: