Sequence of effects in a Backbone.js application

Sequence of effects in a Backbone.js application

Hi All,

I have a question related to chaining effect on elements in a Backbone.js application and how to achieve that.

I have a Backbone.js application which has multiple Backbone.View's. Each of the views is tied to a <div> element on the page and the view controls/owns that element with all it's children. My design choice is that other views don't know or care what children are in each of the views and what effects are applied to them. All other views how is that each view has a show() and a hide() method which takes care of any effects on it's children.

So, a view which owns the <body> element can call .show() or .hide() on all the "children" views to have their own elements animated.

What I would like to be able to do be able to wait until one animation has completed before another one starts. For example: I'd like the element of View1 to hide completely before the element of View2 starts showing.

I could take a page from jQuery and implement "complete" callbacks in all the .show() and .hide() calls but that gets very ugly, very quickly if there are more than two views to deal with.

Can anyone give me an idea of how to accomplish this?
Thank you