Статьи

Совет: легкая последовательная анимация в jQuery

Февраль 22, 2019

В этом видео-кратком совете я продемонстрирую простой способ обеспечить последовательную анимацию бесконечного числа элементов. Первоначально я изучил эту технику у Дэйва Метвина , но не думаю, что многие люди знают об этой изящной маленькой хитрости.


Цель

Мы хотим отфильтровать бесконечное количество элементов на странице, соответствующих какому-либо селектору, а затем заставить их последовательно исчезать.

HTML

1
2
3
4
5
<body>
  <p>Watch</p>
  <p>Me</p>
  <p>Disappear</p>
</body>

JQuery 

  var paras = $ ('p'),
     я = 0;

 // Если вы используете jQuery 1.4, вам не нужно делать ||  [].
 (function () {
   $ (paras [i ++] || []). fadeOut («медленно», arguments.callee);
 }) ();

Мы начинаем с «кэширования» всех абзацев на странице, обернутых в объект jQuery (var paras). Мы также создаем переменную итератора — i . Этот итератор позволяет нам нацеливаться на каждый новый элемент абзаца, не зная заранее конкретной длины объекта paras .

Внутри самовывозной анонимной функции мы получаем первый абзац на странице с «paras [i]» … Но мы хотим увеличить i на единицу для каждой итерации. Таким образом, при следующем вызове выборки он будет ссылаться на следующий элемент в упакованном наборе. Итак, мы должны быть уверены, что напишем paras [i ++] . Затем достаточно просто вызвать fadeout и передать arguments.callee в качестве функции обратного вызова, чтобы обеспечить рекурсию. Это будет равно функции, в которой оно содержится; таким образом, мы говорим «промой и повтори!» 

  оповещения (arguments.callee);  // предупреждает следующее

  (function () {
   $ (paras [i ++] || []). fadeOut («медленно», arguments.callee);
 }) ();

Заметка

Если по какой-то причине вы используете jQuery 1.3 или более раннюю версию, вам нужно указать, что должно произойти, когда paras [i] равен элементу, который не существует. В более старых версиях jQuery он возвращает ошибку «undefined». Чтобы компенсировать это, мы передаем $ (paras [i ++] || [] ), чтобы указать, что, если элемент не существует, мы вместо этого оборачиваем пустой массив, чтобы избежать ошибок.

Следует отметить, что, начиная с jQuery 1.4, в этом нет необходимости, поскольку вместо этого jQuery будет возвращать объект jQuery.

  • Подпишитесь на нас в Твиттере или подпишитесь на ленту Nettuts + RSS для получения лучших учебных материалов по веб-разработке.
35
Share: