在JQuery中动画化变量

Question

我一次动画几个元素，一些元素的最终属性取决于其他元素的属性。例如，我喜欢$('#a').animate({height:$('#b').height()})，但$('#b').height()在动画期间发生了变化。有没有办法让动画在最后$('#b').height()完成？

Answer 1

我假设您要设置#a的高度动画以匹配#b的最终高度，即动画后元素的高度。

您可以通过更新步骤函数中end对象的fx值来实现此目的。例如：

var $a = $('#a').animate({height: 50}, 2000);

$('#b').animate({height: $a.height()}, {
    duration: 2000,
    step: function(now, fx) {
        if (fx.prop === 'height') {
            fx.end = $a.height();
        }
    }
});

DEMO（注意：我反过来得到了元素名称）

这当然只有在第二个动画至少与它所依赖的动画一样长时才有效。

documentation中的更多信息。