javascript - 在 JQuery 中为变量设置动画

Question

我同时为多个元素制作动画，一些元素的最终属性取决于其他元素的属性。例如，我喜欢 $('#a').animate({height:$('#b').height()})，但是 $('#b' ).height() 在动画过程中变化。有没有办法让动画在最后的 $('#b').height() 结束？

Answer 1

我假设您想要为 #a 的高度设置动画以匹配 #b 的final 高度，即元素的高度有动画之后。

您可以通过在 step 函数中更新 fx 对象的 end 值来实现这一点。示例:

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 .