Welcome to WebmasterWorld Guest from 54.205.20.160

Forum Moderators: open

Message Too Old, No Replies

jQuery stop() and 'clearQueue'

   
3:16 am on Mar 15, 2013 (gmt 0)

5+ Year Member



I'm having difficulty getting jQuery's stop() and clearQueue working.
(http://docs.jquery.com/Effects/stop#clearQueuegotoEnd)
The aim is to stop a series of fades on text and images, including those yet to run.

$('#myDIV').stop(clearQueue=true);
$('#myDIV').stop(clearQueue='true');

Neither of these raises an error message, but neither is working:
is either correct?
5:48 am on Mar 15, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



$('#myDIV').stop(true);

is the correct syntax

see thread [webmasterworld.com...]
12:16 pm on Mar 15, 2013 (gmt 0)

5+ Year Member



Many thanks.

The animation runs on an html fragment loaded into #myDIV; it involves fades on both images and text. The architecture is absolutely-positioned images and text in <p> tags.

To target these, would it be correct to use
function stopAll() {
$('#myDIV img').stop(true); $('#myDIV p').stop(true);
}
12:35 pm on Mar 15, 2013 (gmt 0)

5+ Year Member



Many thanks. And for the thread—I'd actually tried correct notation at one stage, but, since the animation involves multiple delays, I wasn't getting very far.

Assuming that I can get one of the solutions in that thread to work, here's the next question—

The animation runs on an html fragment loaded into #myDIV; the architecture is absolutely-positioned images, identical in size and z-indexed in a stack, and text overlays in hidden <p> tags.

To target these, would it be correct to use
function stopAll() {
$('#myDIV img').stop(true); $('#myDIV p').stop(true);
} ?

There are multiple menu links initiating animations. I've done a quick fix by covering the menu with a transparent gif for the duration of each animation.

Cheers.
1:36 am on Mar 16, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Assuming the animation is on $('#myDIV img') and $('#myDIV p')
then that looks good. Replace any .delay() you may be using with say .animate() as per referenced thread.
12:18 pm on Mar 16, 2013 (gmt 0)

5+ Year Member



"Replace any .delay() you may be using with say .animate()"
... as a way of making a kill function, as per your last post in that thread?

My approach has been to put two functions on the menu link: killThese(); doThis()—no delay involved. Or am I missing something?

Been trying doTimeout: can get a sequence working; tried wrapping the html fragment in a div "#myFragment", and referencing that, as in:
"// Outright cancel the preceding doTimeout
$.doTimeout( '#myFragment' );"

Logically, it should work, but not so far.
12:18 pm on Mar 16, 2013 (gmt 0)

5+ Year Member



"Replace any .delay() you may be using with say .animate()"
... as a way of making a kill function, as per your last post in that thread?

My approach has been to put two functions on the menu link: killThese(); doThis()—no delay involved. Or am I missing something?

Been trying doTimeout: can get a sequence working; tried wrapping the html fragment in a div "#myFragment", and referencing that, as in:
"// Outright cancel the preceding doTimeout
$.doTimeout( '#myFragment' );"

Logically, it should work, but not so far.
1:27 am on Mar 17, 2013 (gmt 0)

5+ Year Member



Apologies for double-posts.

I went back to code I used in 2006: I think it can be done without jQ at all, just set Timeout and ClearTimeout.
1:35 am on Mar 17, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



My understanding is that

.stop() will stop animations using .animate() or similar functions based on .animate()

.stop() will NOT stop animations using .delay(), .doTimeout() etc.


Consider changing animation to only use the stopable functions, and your kill function will just need to call .stop();
8:59 pm on Mar 17, 2013 (gmt 0)

5+ Year Member



Thanks for your patience. That's very clear. And in retrospect, it's almost obvious from the way the functions are grouped together on jQuery.

Six generic functions to change and I'm there.

Cheers!
9:41 pm on Mar 17, 2013 (gmt 0)

5+ Year Member



Halfway there: having changed fade to animate as in

function outSlow(id,t){
setTimeout(function(){$('#'+id).animate( {opacity: 0.0}, 1800) },t)
}

and trying stop() in, I think, all possible combinations,I'm getting the text overlays killed but not the image fades. I'll post a link or send a message when i can upload a sample.
10:55 pm on Mar 17, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Get rid of setTimeout, assume opacity starts as 1.0

function outSlow(id,t){
$('#'+id).animate({opacity: 1.0},t).animate( {opacity: 0.0}, 1800);
}

Unsure if fade is in 'bad' list, following may work

function outSlow(id,t){
$('#'+id).fadein(t).fadeout(1800);
}