Infinite Looped Vertical Slider With No Pause

I wrote a script setInterval(function(){ $('#vslides').animate({ top: '-=1960' }, 60000, function(){ $('.vslide:last').after($('.vslid

Solution 1:

You need some kind of recursive function. Here's a solution that provides a single function for animating one element, but also accepts a callback function. Then we create a second function that will recursively iterate through all the elements in a wrapped set, call our animating function, and pass in a callback that will increment our index and call our recurse function again to animate the next element.

// slides an element
function slideIt($elem, callback) {
  /* begin animation */
  $elem.animate({
    top: "-=1960"
  }, 60000, function () {

    /* animation complete do whatever you need here */

    if (callback) {
      /* a callback was provided, invoke it */
      callback();
    }
  });
}

var $elems = $('.all-my-elements');
var index = 0;

// slides a wrapped set of elements one at a time
function slideRecurse () {
  var $elem = $elems.eq(index);
  slideIt($elems.eq(index), function () {
    /* increment index and call slideRecurse again */
    index++;
    // continue animating indefinitely
    // we're at the end so start over
    if (index === $elems.length) {
      index = 0;
    }
    setTimeout(slideRecurse, 0); // no delay. Just using it to queue up the next call on its own stack.
  });
}

// begin sliding all of my $elems one by one
slideRecurse();