Анимация по очереди, а не одновременно

245

03 сентября 2018, 17:10

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

$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>

Answer 1

$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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Автоматический скролл к низу страницы

Нужно чтобы скролл прокручивался к самому низу страницы вместе с анимацией

240

Полиморфные связи в Entity Framework

Есть, скажем, таблица Attachments со столбцами: id | ownerId | ownerType, которые, соответственно: первичный ключ, внешний ключ и таблица, к которой относится...

317

Как “присвоить” функцию в переменную?

Здравствуйте как "присвоить" функцию в переменную:

217

Фильтры с DI в ASP.NET Core

В чем отличие ServiceFilterAttribute от TypeFilterAttribute? Ну кроме того что второй не надо регистрировать в контейнереИ где какой использовать?

241