jQuery stop() and 'clearQueue'

[ctoz]

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?

[daveVk]

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

is the correct syntax

see thread [webmasterworld.com...]

[ctoz]

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);
}

[ctoz]

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.

[daveVk]

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.

[ctoz]

"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.

[ctoz]

"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.

[ctoz]

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.

[daveVk]

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();

[ctoz]

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!

[ctoz]

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.

[daveVk]

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);
}