Здравствуйте! Делаю Ajah сайт. По клику на работу получаю детальную информацию о работе и вставляю в html. Далее необходимо выполнить анимации, но выполнить их последовательно. Но они все равно выполняются параллельно.
Вот код:
$(document).on('click','.link', function(event) { //при клике на работу
event.preventDefault(); //остановить стандартное поведение
$('#preloader-one-work').fadeIn(1200); //включить прелоадер
var linkss = $(this).attr('href'); //адрес нажатой ссылки
//запрос на получение данных
$.ajax({
url: "/details/index.php",
type: "POST",
dataType: "html",
cache: false,
data: "ELEMENT_CODE="+$(this).attr('data-link')
}).done(function(data){ //по выполнению
$('#slider-page').after(data); //добавить данные
}).then(function(){ //потом
window.history.pushState(null, null, linkss); //меняем адрес в адресной строке
$('.left-col').css('display', 'none'); //скрываем левую колонку
}).then(function(){ //потом
$('.one-work').addClass('active'); // опускаем наш блок с работой
}).then(function(){ //потом
$('html').css('overflow', 'hidden'); // убираем скролл у страницы
$('#container-one-work').perfectScrollbar(); //вешаем кастомный скролл
$('#preloader-one-work').fadeOut(500); //убираем прелоадер
$('.left-col').fadeIn(6000); //показываем левую колонку
});
});
Скрытие левой колонки, опускание блока с работой и появление левой колонки выполняется одновременно. А надо последовательно. Как сделать правильно?
