javascript - 如何加快动画汽车的速度并使其在它之前淡出？

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 框，我希望它在到达它之前淡出。我也希望它移动得快一点。

谢谢！

演示：

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 处开始淡入淡出。您当然可以根据需要更改此设置。如果你想加快整个动画的速度，只需通过更短的持续时间。