Animation gets interrupted when user clicks multiple times and fast

Animation gets interrupted when user clicks multiple times and fast

Hello all,

I'm quite happy with an effect on http://4nf.org/ I called "squeeze".
I've currently set the time for the animation to 500 for illustration purposes.

What the algorithm in pseudo-code looks like is as follows:

For every valid click:

- animate the width of the #content div to 0, increasing the margin reciprocally.
- swap the #content div with Ajax
- animate the width of the #content div back to original value, decreasing the margin reciprocally.

Everything works fine, if the user operates slowly.

However, if he clicks too fast, especially when initiating the back button, the animation gets stuck and the width of the #content div decreases, yielding an unacceptable user-experience...

How is that handled correctly?  Do I need a 

  1. stop()

somewhere?


Any help is greatly appreciated

Thanks in advance!


EDIT:  Behaviour is much better when the following code is placed before the animation:

  1. $gthis.stop(true, true);

where $gthis holds the content div(s).


However, the problem persists, when rapidly hitting the back button!


Any ideas?