jquery animation repeat, что не так с моим синтаксисом?

Question

Может кто-то, пожалуйста, оцените мой код и дайте мне знать, если это правильно.

Я пытаюсь запустить одну анимацию за другой, приостановить на 5000 миллисекунд, сбросить все высоты до нуля и повторить анимацию снова на неопределенный срок.

function animateThis(){ 
      $(".bars div:nth-child(1)").animate({'height':'49px'}, 2000, function() { 
       $(".bars div:nth-child(2)").animate({'height':'112px'}, 2000, function() { 
        $(".bars div:nth-child(3)").animate({'height':'174px'}, 2000, function() { 
         $(".bars div:nth-child(4)").animate({'height':'236px'}, 2000, function() { 
          $(".bars div:nth-child(5)").animate({'height':'298px'}, 2000, function() {    
           $('.bars div').delay(2000).css({"height" : "0"}), function() { animateThis()}; 
          }); 
         }); 
        });               
       }); 
      }); 
     } 
    $(".bars").ready(function(){animateThis()}); 

Пример можно увидеть на http://execusite.com/fazio/files/careers-banner/test.html

Я переформатировать его от некоторых ответов, которые я получил вчера, но он по-прежнему не работает, и я не получил никакой обратной связи.

Спасибо!

Answer 1

Вы можете сделать это следующим образом:

Пример:http://jsfiddle.net/patrick_dw/T5acF/4/

function animateThis() { 
    var length = $('.bars div').stop().each(function(i, val) { 
     $(val).delay(i * 2000).animate({ height: (i * 62) + 49 }, 2000, function() { 
      if (i === (length - 1)) { 
       $('.bars div').animate({ height: 0 }, 2000, animateThis); 
      } 
     }); 
    }).length; 
} 

$(document).ready(function() { animateThis(); }); 

---

EDIT: Не заметить анимацию в 0. Исправлена ​​эта обновленная версия.

EDIT: Добавление .stop() перед новым .each(), казалось, чтобы очистить этот вопрос у меня был.

РЕДАКТИРОВАТЬ: Сделано это немного более эффективным путем замены $(this).index() с i (который представляет собой один и тот же индекс).

---

Я, очевидно, не уделяю должного внимания. Вы не хотели оживлять высоту до 0, но хотели задержать 5000 миллисекунд, а затем сразу же сбросить.

Пример:http://jsfiddle.net/patrick_dw/T5acF/5/

function animateThis() { 
    var length = $('.bars div').each(function(i, val) { 
     $(val).delay(i * 2000).animate({ height: (i * 62) + 49 }, 2000, function() { 
      if (i === (length - 1)) { 
       setTimeout(function() { 
        $('.bars div').height(0); 
        animateThis(); 
       }, 5000); 
      } 
     }); 
    }).length; 
} 

$(document).ready(function() { animateThis(); }); 

Answer 2

var animateThis = function(){ 
      $(".bars div:nth-child(1)").animate({'height':'49px'}, 2000, function() { 
       $(".bars div:nth-child(2)").animate({'height':'112px'}, 2000, function() { 
        $(".bars div:nth-child(3)").animate({'height':'174px'}, 2000, function() { 
         $(".bars div:nth-child(4)").animate({'height':'236px'}, 2000, function() { 
          $(".bars div:nth-child(5)").animate({'height':'298px'}, 2000, function() {    
           $('.bars div').delay(2000).animate({"height" : "0"}, 0), function() { animateThis()}; 
          }); 
         }); 
        });               
       }); 
      }); 
     }; 
    $(".bars").ready(function(){animateThis()}); 

Answer 3

delay(2000).css({"height" : "0"})

Здесь вы не указали обратного вызова для того, что делать после задержки; вызов .css выполняется немедленно, потому что .delay немедленно возвращается (и будет настроен обратный вызов, если он был предоставлен, для запуска позже).

.css() производит немедленную замену, а не анимированную. Перед изменением все еще есть задержка, но вы можете легко смутить это, поскольку предыдущий переход делает анимированный. Похоже, вы намереваетесь, чтобы div снова встал на место, но вам нужно учитывать время, затраченное на предыдущий переход. Как и вы, вы просто ожидаете, пока предыдущий переход не завершится, прежде чем защелкнуться на месте.

, function() { animateThis() };

Здесь вы определяете маркированного с именем функции обратного вызова, которая вызывает animateThis(), но на самом деле не называть его - вы не предоставили его функции (например, задержка cssanimate), который выполняет обратный вызов. Несмотря на то, что мы фактически не хотим оживить последний переход, использование animate вместо css позволяет нам перехватить обратный вызов.

Стивен предоставил исправление в своем ответе. Попробуйте это:

$('.bars div').delay(4000).animate({"height": 0}, 0, function() { animateThis(); }) 

Answer 4

Попробуйте это:

function animateThis() { 
    var divs = $(".bars div").get(); 
    var time = 2000; 
    $(divs[0]).animate({'height': '49px'}, time, function() { 
     $(divs[1]).animate({'height': '112px'}, time, function() { 
      $(divs[2]).animate({'height': '174px'}, time, function() { 
       $(divs[3]).animate({'height': '236px'}, time, function() { 
        $(divs[4]).animate({'height': '298px'}, time, function() { 
         setTimeout(function() { 
          $(divs).css('height', '0px'); 
          animateThis(); 
         }, time); 
        }); 
       }); 
      }); 
     }); 
    }); 
} 

Примечание: Этот код является излишним. Я написал это просто, чтобы показать, как сделать код более эффективным (избавляясь от ненужных запросов выбора). Я бы пошел с ответом Патрика, если бы был вами.