homepage Welcome to WebmasterWorld Guest from 174.129.76.87
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
jQuery stop() and 'clearQueue'
ctoz

5+ Year Member



 
Msg#: 4555028 posted 3:16 am on Mar 15, 2013 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4555028 posted 5:48 am on Mar 15, 2013 (gmt 0)

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

is the correct syntax

see thread [webmasterworld.com...]

ctoz

5+ Year Member



 
Msg#: 4555028 posted 12:16 pm on Mar 15, 2013 (gmt 0)

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

5+ Year Member



 
Msg#: 4555028 posted 12:35 pm on Mar 15, 2013 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4555028 posted 1:36 am on Mar 16, 2013 (gmt 0)

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

5+ Year Member



 
Msg#: 4555028 posted 12:18 pm on Mar 16, 2013 (gmt 0)

"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

5+ Year Member



 
Msg#: 4555028 posted 12:18 pm on Mar 16, 2013 (gmt 0)

"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

5+ Year Member



 
Msg#: 4555028 posted 1:27 am on Mar 17, 2013 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4555028 posted 1:35 am on Mar 17, 2013 (gmt 0)

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

5+ Year Member



 
Msg#: 4555028 posted 8:59 pm on Mar 17, 2013 (gmt 0)

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

5+ Year Member



 
Msg#: 4555028 posted 9:41 pm on Mar 17, 2013 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4555028 posted 10:55 pm on Mar 17, 2013 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved