jquery 3 step animation queue timing

Question

I want to a have an animation where an element fades in (1000ms) while moving to the right (5000ms) and at the end it should fade out (at 4000ms, duration 1000ms) again while the element is still moving to the right.

I got the first two parts working but happen to need help with the timing setting of the last part(opacity: 0).

Here is my code:

$(document).ready(function(){
    var truck = $('.truck');
    truck.css("opacity", "0");
    truck.animate({
        opacity: 1
    }, {
        queue: false,
        duration: 1000
    }).animate({
        right: 15
    }, 5000).animate({
        opacity: 0
    }, 1000);

});

Thank you.

Answer 1

Try this...

var truck = $('.truck');
truck.css("opacity", "0");
truck
    .animate({
        right: 15
    }, {
        queue: false,
        duration: 5000
    })
    .animate({
        opacity: 1
    }, 1000)
    .delay(3000)
    .animate({
        opacity: 0
    }, 1000);

and here's a working jsfiddle...

http://jsfiddle.net/YTt9W/