如何加速动画汽车并让它在它之前淡出？

Question

我正在使用Jquery为网页顶部的汽车制作动画。我正在使用此代码使其从左向右移动。

/* Car */
function animateCar($car, endPos, duration) {
    $car.animate({
        left: endPos + "px",
    }, { duration: duration, easing: 'linear', queue: false });
    setTimeout(function() {
        $car.animate({
            opacity: 0
        }, { duration: 6000, easing: 'linear', queue: false });
    }, 74000);
}
animateCar($(".car"), 1200, 80000);

目前，它驱逐我的1000px盒子，我希望它在它到达之前淡出。我也希望它移动得快一点。

谢谢！

Demo：

Answer 1

您可以考虑将动画触发器链接在一起，并在两者之间延迟。

function animateCar($car, endPos, duration) {
    var opacityDuration = parseInt(duration * .75);
    $car.animate({
        left: endPos + "px",
     }, { duration: duration, easing: 'linear', queue: false })
    .delay(duration - opacityDuration)
    .animate({
        opacity: 0
    }, { duration: opacityDuration, easing: 'linear', queue: false });
}

在这里，我开始通过整体动画淡出3/4。您当然可以根据需要进行更改。如果你想加快整个动画的速度，只需要缩短持续时间。