CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Naor
Naor

Reputation: 24083

jquery animation - when do they finish?

I have two jquery animations one by other:

        books.animate({ left: left1 }, {
            duration: this.slideDuration,
            easing: this.easing,
            complete: complete
        });

        laptops.animate({ left: left2 }, {
            duration: this.slideDuration,
            easing: this.easing,
            complete: complete
        });

I want the animations to run simultanusly so I use {queue: false}:

books.animate({ left: left1 }, {
            duration: this.slideDuration,
            easing: this.easing,
                            queue: false,
            complete: complete
        });

        laptops.animate({ left: left2 }, {
            duration: this.slideDuration,
            easing: this.easing,
                            queue: false,
            complete: complete
        });

But now the completed callback called twice! How can I know exactly when does the both animations are done?

Upvotes: 1

Views: 97

Answers (4)

Bruno
Bruno

Reputation: 5822

Using jQuery deferred methods try

$.when( 
    books.animate({ left: left1 }, {
        duration: this.slideDuration,
        easing: this.easing
    }),
    laptops.animate({ left: left2 }, {
        duration: this.slideDuration,
        easing: this.easing
  })
).done( function( ) {

    alert("done!");

});

Fiddle here

Upvotes: 1

Andreas Louv
Andreas Louv

Reputation: 47099

According to http://darcyclarke.me/development/using-jquery-deferreds-with-animations/:

books.animate({ left: left1 }, {
    duration: this.slideDuration,
    easing: this.easing,
    queue: false
});

laptops.animate({ left: left2 }, {
    duration: this.slideDuration,
    easing: this.easing,
    queue: false
});

$.when(books, laptops).done(complete);

Upvotes: 0

dmi3y
dmi3y

Reputation: 3522

this may sounds like something complicated, but why not Deferred Objects ?

http://api.jquery.com/category/deferred-object/

you may investigate more here jQuery animation with deferred pipes?

Upvotes: 1

BenM
BenM

Reputation: 53198

Why not remove the complete handler from one of the animations?

From the extract of code that you've posted, it looks as though you're using the same duration and easing methods on both animations. Therefore it's inherently true that they will complete at the same time, so long as they're being called at the same time...

Upvotes: 1

Related Questions