Javascript JQuery, не могу понять как один за другим плавно выводить атрибуты
с помощью fadeOut(), fadeIn()
Сейчас код разом выводит три имени из массива friends в виде строк. Я хочу, что бы сначало они были спрятанны, а потом однин за другим проявлялись, с помощью fadeOut/In. Можно ли сделать все внутри цикла for, не используя таймеры, а просто задавая для каждой новой строки новый id(0,1,2)(равной переменной i из цикла for) и потом запуская $("id").fadeOut().FadeIn(3000)
var friends = ["Max","Christian","Marina"];
for (var i = 0; i < 3; i++) {
$("body").append("<p>" + friends[i] + "</p>");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>List of my friends:</h1>
Ответы (1 шт):
Автор решения: OPTIMUS PRIME
→ Ссылка
Можно использовать .delay(ms) но это и есть таймер, в чуть более коротком виде) Без jQuery он бы выглядел так: setTimeout(function(){ /*тратата*/ }, 1000 * (i+1) )
var friends = ["Max", "Christian", "Marina"];
for (var i = 0; i < friends.length; i++) {
var $p = $('<p style="display: none">' + friends[i] + '</p>');
$("body").append($p);
$p.delay( 1000 * (i+1) ).fadeIn();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>List</h1>