Question

I have a lit of offsets for a div that I load when a link is clicked to give a comic book style effect. Each offset activates other animations to give a more dynamic feel.

I am now looking to change it so that to move from offset 0 to offset 2 will move via offset 1. To add to the complexity, I don’t want the secondary animations at offset 1 to go off in this instance.

The problem, therefore, is that I need to activate the sliding function and then activate it again once the current one is complete. Is there a way for me to know this? Also, is there an easy way to reverse the animation so it will occur the next time they go to that offset?

If I am going about this the wrong way, please feel free to tell me.

Answer 1

It seems that the core of your problem is the flow of the javascript code. You will want to use a callback function. If you add a callback variable to a function, you can execute code after the function has run its course:

function foo(callback) {
    // some code you want to execute

    // then run the callback function
    if (typeof(callback) == "function")
        callback();
}

function bar() {
   // some code you want to execute after foo is finished
}

Now you can run bar() after foo is complete like this:

foo(bar);