jQuery: анимация происходит одновременно, а не подряд с итерацией .each()

Вы должны умножить 500 на index + 1, чтобы первое произошло в 500ms, второе в 1000ms и т. д.

setTimeout(function() {go(element)}, 500 * (index + 1));

Прямо сейчас вы перебираете их все и говорите каждому из них 500ms from now, do this. Итак, 500ms с этого момента каждый из них делает это.

Используйте Promises и reduce. Подождите, чтобы начать следующую анимацию, пока не завершится предыдущая.

Если вы хотите подождать, чтобы начать начальную анимацию, оберните всю цепочку в setTimeout().

Array.from(document.querySelectorAll("ul > li")).reduce((prev, curr) => {
  return prev.then(function() {
    return new Promise((resolve, reject) => {
      $(curr).animate({
        opacity: 0.2
      }, 1000, function() {
        resolve();
      });
    });
  });
}, Promise.resolve());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Hello</li>
  <li>Hello</li>
  <li>Hello</li>
  <li>Hello</li>
  <li>Hello</li>
  <li>Hello</li>
</ul>

Все они происходят одновременно, потому что все setTimeout вызываются внутри each, что не занимает много времени, чтобы зациклить список элементов (всего несколько миллисекунд). Если вы хотите связать их в цепочку, используйте обратный вызов complete для jQuery#animate, чтобы сигнализировать о следующей анимации для Начало:

function iterate() {
    var $list = $(".mini"),                                // get the whole list of elements
        i = 0;                                             // i is the index of the currently animated element from list

    function next() {                                      // the function that when called will get the current element from list (if exists) and starts that element's animation
        if(i < $list.length) {                             // if there is still un-animated elements in $list
            setTimeout(function() {                        // animate the current element
                go($list.eq(i), next);                     // specify that next will be called when the current element's animation is done
            }, 500);
            i++;                                           // increment i of course
        }
    }

    next();                                                // call next to start the magic
}

function go(element, complete) {                           // go will take an element to be animated, and a function that will be called when that animation is done
    element.animate({left: "500px"}, 200, complete);       // simply call animate with that additional function (see jQuery#animate docs)
}