javascript - jq 对 volatile 值进行动画处理

Question

我正在尝试创建一个动画来显示div其中包含不同内容的元素。从divs0 高度和宽度开始，目标是首先扩展宽度，然后计算 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');
        });