javascript - Jquery animate - 在动画完成之前执行的回调

Question

我想要完成的是让元素扩展高度，然后在高度变化完成后应用背景图像。我注意到回调中的背景图像在高度动画完成之前应用，导致性能下降。谁能告诉我这是为什么？

$(document).ready(function() {
    $('#hero').animate({
        height: ($(window).height() - $("#hero").offset().top - 50) 
    }, 100, function() {
        $('#hero').css('background-image', 'url(./img/hero.jpg)');
    });
});

Answer 1

您在 #hero 上有一个transition: all 1s ease，这将导致动画播放不稳定，因为您正尝试使用 css3 动画来制作 jQuery 动画(并抛出各种时序问题)。

我怀疑正在发生的事情是，您收到了 jQuery 动画已完成的通知，但 css3 动画还没有完成额外的 1 秒，这就是为什么您会看到自己的样子。