CODEWITHSUNDEEP
jqueryjquery-animatequeuetiming
Sebsemillia
Sebsemillia

Reputation: 9486

jquery 3 step animation queue timing

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.

Upvotes: 0

Views: 339

Answers (1)

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

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/

Upvotes: 1

Related Questions