JQ анимировать летучее значение

Question

Я пытаюсь создать анимацию для показа div элементов с разным количеством контента в них. divs начинается с 0 высоты и ширины, и цель состоит в том, чтобы сначала увеличить ширину и , а затем вычислить scrollHeight , чтобы я мог разделить его на 2 и разделить анимацию высоты следующим образом .

let t = modal.position().top;
let h = 0;
modal.animate({width: '60%'}, 'fast').queue(function (next){
    h = this.scrollHeight / 2; // Calculate at this point!
    next();
}).animate({height : h }, 'fast').animate({height: (h * 2), top: (t-h)}, 'fast');

Это не работает так, как я ожидал. 2-я и 3-я анимации считают h 0! Любые идеи / помощь будут отличными.

Answer 1

ОК, по-видимому, путь через обратный вызов:

let t = modal.position().top;
modal.animate({width: '60%'}, 'fast', 'linear', function(){
            let h = this.scrollHeight / 2;
            $(this).animate({height: h}, 'fast')
                   .animate({height: (h * 2), top: (t - h)}, 'fast');
        });