Завершение JQuery анимаций перед следующей функцией

Question

Итак, я создал серию всплывающих окон windows, которыми я очень доволен, однако с ними есть две проблемы, которые я не могу понять: во-первых, переход от нажатия кнопки к открытию всплывающего окна (и закрытие в этом отношении) довольно неприятно, так как расположение кнопки отличается от того, где появляется всплывающее окно. Я пробовал использовать функцию jquery animate для перемещения кнопки, однако, если я попытаюсь запустить какие-либо функции после анимации, анимация дергается (начинает двигаться?), А затем переходит к любым другим присутствующим функциям. Я рассмотрел здесь решения аналогичных проблем, но не нашел ничего, что работает. Итак, как мне полностью завершить анимацию sh перед запуском других функций? Это сокращенная версия того, что у меня есть до сих пор (все еще очень ново для jquery btw):

$('.button').click(function () {
    if ($(this).attr("trigger") === "0") {
        $(this).animate({
            left: $(window).width() / 2,
            top: $(window).height() / 2
        }, 100, function () {
            var modal = $(this).data("modal");
            $(this).hide();
            $('.front').addClass('front-open');
            etc.......
        });
        $(this).attr("trigger", "1");
    }
    else {
        $(this).animate({ etc........
    }
});

Вторая проблема - это фрагмент кода, на котором я основал свои всплывающие окна, всплывающие окна открываются в следующую позицию, и я не могу понять, как получить jquery для репликации указанной позиции (это в css):

top: calc(50% - 132.5px);
left: calc(50% - 265px);

Я полагаю, если я смогу решить эти две проблемы , Я могу самостоятельно решить оставшуюся проблему возврата кнопки в исходное состояние.

Спасибо за любые советы!