Как создать fade-in и fade-out l oop с jQuery - PullRequest
Новая
       6

Как создать fade-in и fade-out l oop с jQuery

0 голосов
/ 01 августа 2020

Итак, в настоящее время я использую в своей программе метод плавного увеличения изображения. Однако я хочу, чтобы он постепенно усиливался, затухал и повторял один и тот же процесс снова и снова.

Что мне для этого нужно? 

$(document).ready(function() {
  var $el = $(".intro");
  var text = $el.text();
  var words = text.split(" ");

  var html = "";

  for (var i = 0; i < words.length; i++) {
    html += "<span>" + words[i] + " </span>";
  }

  $el
    .html(html)
    .children()
    .hide()
    .each(function(i) {
      $(this)

        .delay(i * 1500)

        .fadeIn(1700)

    });
});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="test.js"></script>

  <div class="intro">PREDICT SIMULATE OPTIMIZE</div>
</body>

</html>

1 Ответ

0 голосов
/ 01 августа 2020

В зависимости от того, какой визуальный эффект вы ищете (вопрос открыт для интерпретации) ...

Вы можете настроить два взаимно запускающих пользовательских события на содержащем div.

Чтобы получить время правильное, используйте эксплойт jQuery s .promise(), который возвращает обещание, которое будет выполнено, когда текущая анимация (и) будет завершена.

Чтобы начать процесс, просто активируйте тот или иной пользовательский события. 

$(document).ready(function() {
    var $el = $('.intro');
    var $words = $el.html($el.text().split(' ').map(word => `<span>${word} </span>`).join('')).children().hide();
    $el.on('fadeIn', function() { // custom event
        $.when(...$words.map(function(i, word) => $(word).delay(i * 1500).fadeIn(1700).promise()))
        .then(function() {
            $el.trigger('fadeOut'); // trigger fadeOut when fadeIn is complete
        });
    }).on('fadeOut', function() { // custom event
        $.when(...$words.map(function(i, word) => $(word).delay(i * 1500).fadeOut(1700).promise()))
        .then(function() {
            $el.trigger('fadeIn'); // trigger fadeIn when fadeOut is complete
        });
    }).trigger('fadeIn'); // start a never ending fadeIn/fadeOut cycle.
});

непроверено

Процесс, несомненно, можно сделать более эффективным, в основном, работая с обещанием только из последнего слова, но код, вероятно, будет запутаться.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...