1

При добавлении двух блоков с анимацией они анимируются одновременно, а надо, чтобы сначала раскрылся один, затем по завершении второй.

$service = '<div style="display:none;">Сервисный текст</div>';
$desc = '<div style="display:none;">Описание</div>';
function add() {
	$("#feed").append($service, $desc);
	$("#feed > div:nth-last-child(n+1)").slideDown('fast');
}
#feed > div{
	padding:10px;
	border:1px solid silver;
	background:lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button style="position:fixed;top:0;" onclick="add();">Добавить текст</button>
<div id="feed"></div>

1 ответ 1

2

$service = '<div style="display:none;">Сервисный текст</div>';
$desc = '<div style="display:none;">Описание</div>';

function add() {
  
  $("#feed").append($service);
  $("#feed > div:last-child").slideDown('fast', () => {
    $("#feed").append($desc);
    $("#feed > div:last-child").slideDown('slow')
  });
}
#feed>div {
  padding: 10px;
  border: 1px solid silver;
  background: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button style="position:fixed;top:0;" onclick="add();">Добавить текст</button>
<div id="feed"></div>

5
  • Ваш код как-то странно добавляет блоки с "описанием" в геометрической прогрессии...
    – Kodek
    Commented 12 июл. 2018 в 13:29
  • Начиная со второго нажатия кнопки код перестает выводить блоки по очереди, снова начинает выводить их одновременно и начинает наращивать количество блоков $desc в геометрической прогрессии.
    – Kodek
    Commented 12 июл. 2018 в 13:36
  • @Kodek подправил
    – C.Raf.T
    Commented 12 июл. 2018 в 13:37
  • Спасибо. Сейчас постараюсь разобраться что там написано и что изменилось =)
    – Kodek
    Commented 12 июл. 2018 в 13:38
  • @Kodek удачи..! )
    – C.Raf.T
    Commented 12 июл. 2018 в 13:38

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.