Базовое понимание циклов в jQuery

Question

Мне трудно понять, как зацикливать jQuery, я думаю, что моя проблема в том, что я думаю на языке PHP.

Допустим, у меня есть этот очень простой пример.

HTML:

<div style="background:#98bf21;height:100px;width:100px;position:relative">

JS

$(document).ready(function(){
$("div").animate({height:300},"slow");
$("div").animate({width:300},"slow");
$("div").animate({height:100},"slow");
$("div").animate({width:100},"slow");
});

Здесь здесь

Если я правильно понял, мне пришлось бы использовать .each () *

Но я не могу понять, как заставить это работать.

ПРИМЕЧАНИЕ: Это только пример, мне интересно большев подходе, который вы выбрали бы, а не фактическое зацикливание.

Заранее спасибо, пожалуйста, спросите, нужны ли какие-либо разъяснения!

* Я не обязательно ищу ответ с .each (), любой подход, который вы используете, подходит для учебных целей.

Answer 1

Вам просто нужна функция, которую вы можете запустить в качестве последнего обратного вызова анимации, например:

$(function(){
    function loop() {
      $("div").animate({height:300},"slow")
              .animate({width:300 },"slow")
              .animate({height:100},"slow")
              .animate({width:100 },"slow", loop);
    }
    loop();
});

Вы можете проверить это здесь .

Answer 2

Кража кода Ника, чтобы мы могли расширить его до завершения после нескольких итераций.

$(function(){
  function loop(n) {
    if(n > 0)
    {
      $("div").animate({height:300},"slow")
          .animate({width:300 },"slow")
          .animate({height:100},"slow")
          .animate({width:100},"slow")
          .animate({width:100 },"slow", loop(n-1));
    }
  }
  loop(5);
});

Второй .animate({width:100},"slow" не является опечаткой.Я не понимаю почему, но анимация сокращения ширины не происходит без нее.

Answer 3

jQuery (почти всегда) автоматически применяет методы, которые вы запускаете для каждого элемента, возвращаемого селектором.

В вашем примере каждый div на странице будет анимированным.

Кроме того, jQuery является цепным, что означает, что вы можете удалить много повторяющегося кода:

$(document).ready(function(){
$("div")
  .animate({height:300},"slow")
  .animate({width:300},"slow")
  .animate({height:100},"slow")
  .animate({width:100},"slow");
});

Также знайте, что вы можете анимировать более одного свойства одновременно с помощью метода .animate (). В зависимости от желаемого эффекта вы можете комбинировать анимированные свойства.