BidiBom
@BidiBom
Wild stuff. Africa

Как выполнить код последовательно?

Здравствуйте! Делаю 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); //показываем левую колонку
        });
    });

Скрытие левой колонки, опускание блока с работой и появление левой колонки выполняется одновременно. А надо последовательно. Как сделать правильно?
  • Вопрос задан
  • 409 просмотров
Решения вопроса 2
IonDen
@IonDen
JavaScript developer. IonDen.com
Обратите внимание на ваши анимации. Они на самом деле запускаются одновременно. Чтобы выполнить последовательно, нужно использовать встроенный в анимации коллбэк.

Например вы показываете левую колонку:
$('.left-col').fadeIn(6000);
чтобы выполнить код после завершения этой анимации нужно сделать так:
$('.left-col').fadeIn(6000, function () {
    // этот коллбэк будет вызван после завершения анимации
});
Ответ написан
Alexufo
@Alexufo
противоречивый, сложный, весь компьютерный.
Все правильно. Вам нужно на callback анимации вешать или на complete функцию. Иначе все будет работать асинхронно.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы