gbreadman13
@gbreadman13
Фронтенд-кодер из Красноярска

Как дождаться завершения функции в jQuery?

Драсьте всем, привет всем.

У меня выезжающее меню. В нем ссылки якоря для лендинга.

Присваиваю всему контенту transform: translateX
$('.mobile-menu-button').click(function (e) { 
        $('.all-wrap').toggleClass('slide');
    });
Убираю transform: translayeX по клику на пункт меню. (Контент встает на место, меню прячется за вьюпорт)
$('.mobile-menu-link').click(function (e) { 
        e.preventDefault();
        $('.all-wrap').toggleClass('slide');
    });
По ссылке переходит к якорю.
$("a").click(function() {
    $("html, body").animate({
        scrollTop: $($(this).attr("href")).offset().top + "px"
    }, {
        duration: 500,
        easing: "swing"
    });
    return false;
    });

Проблема в том, что анимация работает по-диагонали. Одновременно и прячется вправо по X, и скролится по Y.

Как сделать, чтобы при клике сначала на исходную вернулось (спряталось) окно меню, а лишь потом начался скролл до якоря?
  • Вопрос задан
  • 100 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Dasslier
FrontEnd Developer
В вашем вопросе половина ответа - отследите возврат на исходную при клике и затем запускайте скролл. Дальше вопрос - как понять, что меню вернулось на исходную? Там в любом случае есть какой-то параметр и у него есть значение. Вот когда параметр достигнет значения, тогда и запускайте ваш скролл.
Можно еще вот это использовать - событие, которое срабатывает, когда анимация заканчивает свое выполнение transitionend
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы