I have a jQuery slideshow in which I sometimes chain various functions together (jQuery runs in one function, ending in a call to the next function) to create a series of page effects. These extended effects can take a minute or so to run.
When the user navigates to another slide, I need to stop & reset the animation so that: a) it doesn't continue during the next slide, and b) so that if the user navigates back to the original slide, the animation starts from scratch.
Usually, some combination of stop(), clearTimeout(), or script-specific command works. Sometimes though, it doesn't. Questions:
1) Is there a way to stop animations on different elements all at once? I've tried:
.stop(true) & .stop(true, true) - doesn't always work
.clearQueue() - only works on one object
.finish() - promising, but stops my jquery slideshow too
event.stopPropagation() - stops slideshow but not animations (opposite of what I want)
I've even tried globally turning fx off, then back on:
fx.off = true; $.fx.off = false;
Also promising, but unfinished animations pick up where left off while finished ones revert to initial state.
2) Is there a better way to chain the animations together than described in my opening sentence that allows for a simple stop/reset?