Анимировать один абзац за раз - PullRequest
Новая
       8

Анимировать один абзац за раз

1 голос
/ 02 февраля 2020

У меня есть div с несколькими абзацами внутри. Я хочу, чтобы каждый из этих абзацев постепенно исчезал один за другим. Я могу сделать это с помощью следующего кода. Тем не менее, поскольку у меня будет гораздо больше элементов div со многими другими абзацами, каждый из которых имеет свои уникальные имена классов, мне интересно, есть ли более простой способ добиться этого без продолжения копирования кода, изменения имен классов каждый раз. 

$('.line1').css('visibility','visible').hide().fadeIn(1000, function(){
  $('.line2').css('visibility','visible').hide().fadeIn(1000, function(){
    $('.line3').css('visibility','visible').hide().fadeIn(1000, function(){
      $('.line4').css('visibility','visible').hide().fadeIn(1000);
    });
  });
});
.line1, .line2, .line3, .line4 {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
  <p class="line1">Text 01</p>
  <p class="line2">Text 02</p>
  <p class="line3">Text 03</p>
  <p class="line4">Text 04</p>
</div>

Ответы [ 2 ]

2 голосов
/ 02 февраля 2020

Имена классов здесь не имеют значения, вы можете использовать .line или .line{i} или что-нибудь еще, если есть простой способ выбрать все из них.

Если вы хотите другой класс имена, которые вы могли бы использовать .div1 > p вместо .line в коде.

Если небольшие (+/- несколько миллисекунд) неточности не являются проблемой, вы можете использовать setTimeout для этого. 

$(".line").each(function (i) {
  $(this).css("opacity", 0);
  
  setTimeout(() => {
    $(this).animate({ opacity: 1 }, 1000);
  }, 1000 * i);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
  <p class="line">Text 01</p>
  <p class="line">Text 02</p>
  <p class="line">Text 03</p>
  <p class="line">Text 04</p>
</div>

Вы также можете использовать .delay вместо setTimeout. 

$(".line").each(function (i) {
  $(this).css("opacity", 0).delay(1000 * i).animate({ opacity: 1 }, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
  <p class="line">Text 01</p>
  <p class="line">Text 02</p>
  <p class="line">Text 03</p>
  <p class="line">Text 04</p>
</div>
0 голосов
/ 02 февраля 2020

Вы можете использовать delay для задержки последующих fadeIn с, например: 

for (var n = 1; n <= 4; ++n) {
    $(".line" + n).css('visibility','visible').hide().delay(1000 * (n - 1)).fadeIn(1000);
}

Live Пример: 

for (var n = 1; n <= 4; ++n) {
    $(".line" + n).css('visibility','visible').hide().delay(1000 * (n - 1)).fadeIn(1000);
}
.line1, .line2, .line3, .line4 {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
  <p class="line1">Text 01</p>
  <p class="line2">Text 02</p>
  <p class="line3">Text 03</p>
  <p class="line4">Text 04</p>
</div>

Или с любым списком имен классов: 

["line1", "line2", "line3", "line4"].forEach(function(cls, index) {
    $("." + cls).css('visibility','visible').hide().delay(1000 * index).fadeIn(1000);
});

Live Пример: 

["line1", "line2", "line3", "line4"].forEach(function(cls, index) {
    $("." + cls).css('visibility','visible').hide().delay(1000 * index).fadeIn(1000);
});
.line1, .line2, .line3, .line4 {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
  <p class="line1">Text 01</p>
  <p class="line2">Text 02</p>
  <p class="line3">Text 03</p>
  <p class="line4">Text 04</p>
</div>
...