Цепная анимация JQuery через итерацию

Question

У меня есть несколько элементов div рядом друг с другом (по горизонтали), и я хочу ширину каждого из них, последовательно. В идеале они должны выглядеть как один длинный div, растущий справа налево. Моя проблема в том, что все они начинают расти одновременно. У каждого div есть имя 'div' с номером в конце, и я использую 'i' в качестве этого числа. Это должно быть динамично, потому что я не знаю, каким будет «я». Могу ли я связать это через итерацию? Спасибо.

for (i = 0; i <= count; i++)
    {
        $('#div' + i).animate( {
            "width": "toggle"
        }, 1500 );
    }

Answer 1

Используйте функцию обратного вызова из функции animate для запуска следующей операции.

<script type="text/javascript">
  $.curDiv = 0;    
  continueAnimation = function()
  {
      $('div' + $.curDiv++).animate( { "width": "toggle" }, 1500, continueAnimation);   
  }
  continueAnimation();
</script>

Answer 2

В итоге я создал отдельную функцию, которая будет вызывать анимацию в div, а затем вызывать саму себя. Поскольку это вызвало себя, это увеличило бы счетчик, и я сравнил счетчик с моим полным значением и остановил бы цикл при необходимости.