Повторить функцию jquery - PullRequest
Новая
       1

Повторить функцию jquery

0 голосов
/ 28 мая 2020

У меня есть функция jquery, которая последовательно анимирует элементы списка. Он работает хорошо, но я бы хотел повторить его после того, как все элементы списка были анимированы. Я знаю, что это, наверное, просто, но не могу понять: (

  $('ul').each(function() {
      $(this).children().each(function(i) {
          $(this).delay((i++) * 1000).animate({opacity:0});
      });
      $(this).children().each(function(i) {
          $(this).delay((i++) * 0).animate({opacity:1});
      });
  });

Ответы [ 2 ]

1 голос
/ 28 мая 2020

Это будет повторять анимацию для всех ul списков только после того, как каждый li элемент под ним завершит свою анимацию. 

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('ul').each(function() {
        animateUl(this);
      });
    });

    function animateUl(elementUl) {

      $(elementUl).children().each(function(i) {
        $(this).delay((i++) * 1000).animate({
          opacity: 0
        });
        $(this).delay((i++) * 0).animate({
          opacity: 1
        });
      });


      setTimeout(animateUl, $(elementUl).children().length * 1000, elementUl);
    }
  </script>
</head>

<body>

  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>

  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
  </ul>

</body>

</html>
1 голос
/ 28 мая 2020

Просто создайте одну функцию animate() и вызовите саму recursively. Используйте setTimeout из $(ul).children().length * 1000, чтобы установить задержку при вызове функции.

Я думаю, у вас есть несколько таких ul. Поэтому анимацию необходимо повторять в зависимости от количества li для соответствующего ul. 

function animate(ul) {
  $(ul).children().each(function(i) {
      $(this).delay((i++) * 1000).animate({opacity:0});
  });
  $(ul).children().each(function(i) {
      $(this).delay(0).animate({opacity:1});
  });
  
  // Call for repeatedly animate once all animations are done.
  // Use timeout of $(this).children().length * 1000 to set delay in calling function.
  setTimeout(animate, $(ul).children().length * 1000, ul);
}

// Initiate animation.
$('ul').each(function() {
  animate(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...