jQuery动画在图像上处于中间动画状态

Question

I have am using a callback function on a FullPage.js site which calls a function to run a series of animation on 20 divs. The problem is it sometimes works, but often times breaks. I've realized that it breaks on 3 particular slides. Each of them have slideshow carousels on them. I have reason to believe these are to blame in some shape or form.

However, when I set the slideshow divs to display:none, the animation work flawlessly.

You can see the site at question here (the slides the dont work properly are the two About sections and the Gallery section):

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

Am I overlooking something here? I've been coding for a while and have never experienced something like this.

Example code for the small tile animation can be found here:

Here is the code for the animation that gets stuck:

(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);
})();

Thanks. A tip is ready for anyone who helps me solve this.

Answer 1

Just checked out your fiddle, it seems like your second function h1 finishes looping in about 1000 ms which works when masterAdd() has a timeout of 1000ms but when you increase it to 1500ms h1's while loop ends prematurely. If you increase your h1's setTimeout function to 150, it should animate all the tiles.

Forked your fiddle and tested it out: http://jsfiddle.net/us6n382k/

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

Hope that helps!

Answer 2

I have a feeling it has to do with the fact that when you randomly select a tile to animate, it may be a tile that has already been animated, but the animation is not yet complete. You could use the :not() selector to avoid that:

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