Question

I’m using Jquery to animate a car at the top of a webpage. I’m using this code to make it move from left to right.

/* 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);

At the moment, it drives off of my 1000px box, and I want it to fade out just before it reaches it. I also would like it to move a little faster.

Thanks!

Demo:

Answer 1

You might consider chaining your animation triggers together with a delay in between.

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 });
}

Here I am starting the fade 3/4 of the way through the overall animation. You can of course change this as needed. If you want to speed the whole animatoin up, just pass in a shorter duration.