| stopping "chained" functions before they end
|
sssweb
msg:4537714 | 3:08 pm on Jan 20, 2013 (gmt 0) |
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?
|
sssweb
msg:4538101 | 10:50 pm on Jan 21, 2013 (gmt 0) |
I found one solution that works in some cases, but still not all:
var timer = null;
function myFunc(){
// code
timer = setTimeout("myFunc()", 1);
}
// run this on reset to stop the above function:
function stop(){
clearTimout(timer);
}
Any better ideas?
|
daveVk
msg:4538118 | 11:48 pm on Jan 21, 2013 (gmt 0) |
if .stop(true, true) is used ( 2nd true = jumpToEnd ) the callback function is called and may start a chained animation.
|
sssweb
msg:4538327 | 1:20 pm on Jan 22, 2013 (gmt 0) |
Yes, that's what I discovered. I only use it on statements that don't have a callback; otherwise, I use .stop(true);
I've been searching the web for this; other than my second post above, I didn't come up with much -- so maybe there's no solution. Unless somebody knows a way to set up .queue() to sequence through a series of animations working on different objects. Then I could just clear the queue.
|
sssweb
msg:4538957 | 2:40 pm on Jan 24, 2013 (gmt 0) |
I guess there's no clear answer to this, so I'll continue to minimize it as best I can using the above methods.
I've got email notification on for this topic and welcome further reply; otherwise, I'll consider it closed.
|
sssweb
msg:4540044 | 10:06 pm on Jan 28, 2013 (gmt 0) |
Update - for anyone looking for a solution to this, I found the following:
First, the culprit: jQuery .delay() does not respond to .stop(); from the jQuery docs:
| The .delay() method is best for delaying between queued jQuery effects. Because it is limited — it doesn't, for example, offer a way to cancel the delay — .delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases. |
|
I'm not the only one who's brought this up; the following bug tickets suggest fixes, but I couldn't get them to work (I include them in case better skilled coders can figure them out):
[bugs.jquery.com...] - implies that the 'bug' was fixed as of jquery 1.7, but I upgraded to the latest version and still had the problem
[bugs.jquery.com...] - suggests clearQueue(), but as another poster pointed out here ( [bugs.jquery.com...] ), it doesn't always work
*********
SOLUTIONS: I found two plug-ins that do the trick:
.doTimeout() [benalman.com...] works so far for me
.delayed() [theloveofcode.com...] - this one is chainable and has more functionality; the problem though is that it only works on specific events (i.e. click, onload, etc.); I need it to work directly from a selector: $("id").delay(5000).animate(...);
If anyone can get it to work that way, I'd like to know.
|
daveVk
msg:4540063 | 12:23 am on Jan 29, 2013 (gmt 0) |
Good find
.animate() would also be worth a try, animating nothing ( or nothing visible )
|
sssweb
msg:4540184 | 1:33 pm on Jan 29, 2013 (gmt 0) |
Yes - I saw that hack posted by someone in the jquery forum. I couldn't get it to work animating nothing, so I think you have to include a dummy CSS call that doesn't really change anything (like "z-index": 1, or opacity: 1 for already visible elements). You also have to include a time to sub for the delay. So:
$("id").animate({"z-index": 1}, 5000).animate(...);
is the same as:
$("id").delay(5000).animate(...);
except that you can stop it with:
$("id").stop(true);
|
sssweb
msg:4540188 | 2:08 pm on Jan 29, 2013 (gmt 0) |
BTW, minor correction: the doTimeout() plug-in mentioned above is chainable too.
|
daveVk
msg:4540340 | 9:47 pm on Jan 29, 2013 (gmt 0) |
Or invent your own property seems to be OK
$("id").animate({x:1}, 5000).animate(...);
|
|
|
