jQuery - проблема с анимацией анимации

Question

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

То, что я пытаюсь сделать с jQuery, - это анимировать ящики внутри div. Анимация будет состоять в том, что когда страница будет взиматься, тогда появится каждый ящик. По умолчанию исходная непрозрачность равна 0 на CSS.

И для этого нет проблем, основная проблема здесь в том, что я хочу только «строки» из 4 ящиков, а затем еще одну строку и так далее. Я думал о том, как это сделать, я просто могу сделать это за 2 строки (8 ящиков), но когда их больше 8, у меня проблемы.

Помощь! Благодаря! : D

function boxAnimation(){ 
    $(".num").each(function(i){ 
     delay = i *500; 
     offsetLeft = i * 120; 
     offsetTop = i * 0; 
     if(i >= 4){ 
      offsetLeft = (i-4) * 120; 
      offsetTop = 120; 
     } 
     $(this).delay(delay).animate({ 
      left:offsetLeft+"px", 
      top: offsetTop+"px" 
      }, 
      200, 
      function(){ 
      $(this).css("opacity","1"); 
     }); 
    }); 
} 

Answer 1

Проблема, которую я имел, было то, что каждая строка анимации есть 4 коробки, так что я должен был вычислить Offsetop, а также offsetLeft, для этого я использовал эту операцию:

1. i%4 который дает мне нумерацией от 0 до 3 (каждая строка имеет теперь 4 коробки) и * 120 для OffsetLeft

2. 1/4 Который дает мне 0..1..2.. и т. Д., Но с интервалами 4, это означает, что когда у меня есть 4 блока, тогда смещение увеличивается на 1, затем плюс 1, ... и так далее. Если вы хотите, чтобы вся строка имела точный верх, вы должны добавить Math.floor(i/4).

Например, предположим, что у нас есть коробка 7 так i = 7. Тогда коробка 7 должна пройти в строке 2 ° на колонке 4 °, потому что 7 в программировании равно коробке 8 (нумерация от 0 до 7). Зная, что у нас есть:

«Столбец» Горизонтальное перемещение Расчет -> я% 4 * 120 -> 7% 4 * 120 -> 3 * 120 ->

Для моих упражнений мы имеем:
0 - 1 Колонка
120 - 2 Колонка
240 - 3 Столбец
360 - 4 Колонка

"Строка" Вертикальное движение Расчет -> я/4 * 120 -> 7/4 * 120 -> 1 * 120 ->

0 - 1 Ряд
120 - 2 Ряд
240 - 3 ряд
..

function boxAnimation(){ 
    $(".num").each(function(i){ 
     delay = i *300; 
     offsetLeft = i%4 * 120; 
     offsetTop = i/4 * 120; 
     $(this).delay(delay).animate({ 
      left:offsetLeft+"px", 
      top: offsetTop+"px" 
      }, 
      400, 
      function(){ 
      $(this).css("opacity","1"); 
     }); 
    }); 
}