stopping jquery animations

[sssweb]

I have some jquery animations that work fine on page load. But they run in a slideshow and act buggy if a user navigates to the next slide in the middle of an animation, then navigates back. The page tries to complete the previous animation while also running it from scratch.

I've tried $(#myFx).stop(true, true); when leaving the slide, but it doesn't work. Am I doing something wrong or is there another way to handle this?

[enigma1]

You need to check the nav/click events for the slide change and reset the animation. If there is some custom timer make sure it's stopped too.

[sssweb]

Thanks -- I'll look into that.

[sssweb]

I've fixed the buggy display using a work-around, but at script level, the animations still build-up each time I re-navigate to an already-displayed slide. I still want to stop the behavior so it doesn't create the same display problems elsewhere.

Re enigma's advice above, the slideshow includes callback functions when a slide transitions out, and I've tied my 'stop()' command to that, but it doesn't work. Am I using that correctly or should I be using some other command?

[rocknbil]

Are you using timeouts or intervals anywhere? Be sure to clear existing timeouts before initiating new ones. (?)

[sssweb]

I think I've figured out what's going on, but I'm not sure there's an easy fix.

The animation applies <span> tags around each word in the text block. Each time the user navigates back to the slide, another set of <span> tags is applied and they build up. Is there an easy way to clear that? (I don't use <span> tags in my code so a universal command might work, though I don't know if the slideshow script applies any.)

I'm also going to play around with forcing a page re-load to clear everything.

[enigma1]

You can use remove on selector or clear the inner html, html('') or perhaps add some code to check if the span wrap is already applied so you applied it once.

[sssweb]

I tried clearing the code and can't get it to work, so I'll probably just stick with the work-around I have.

BTW rocknbil, thanks for the heads-up on the timeOut -- that was part of it and is now fixed.

[sssweb]

Re clearing timeouts, since it is a recurring issue, I want to use a function to clear all timeouts in an array, as needed. I found this:

var timeOuts = new Array();
function clearAllTimeouts(){
for(key in timeOuts ){
clearTimeout(timeOuts[key]);
}
}

I need to get timeOuts to work as an associative array, which, I just learned, javascript doesn't allow. I read somewhere that you can configure a js object to give the same result. How would I do that? (pls be simple & complete, including assigning the object var in the first place -- I know nothing about js objects)

[sssweb]

Follow-up: now I do find examples that seem to be associative arrays in js, so I'm a little confused. Will the above function cycle thru an array of 'named' elements (e.g. timeOuts['one'], timeOuts['two']), clearing each one? It seems to work in testing, but I also want to delete the array element once the timeout is cleared, and I'm not sure whether "delete timeOuts['one'];" gets the job done -- I get 'undefined' for the element, but timeOuts.length acts buggy (it doesn't count named elements so I can't tell if the array is reduced by 1).

[rocknbil]

1. For your current code to work (which it won't, see #2) you'd have to remove "var"
var timeOuts = new Array();

2. There are no associative arrays in Javascript (which is kinda stupid, I think) but there are objects we can assign properties to that act like associative arrays.

timeOuts = {
key1: '2343242',
key2: '876858658
}

With that alone, your function would probably work.

function clearAllTimeouts(){
for(key in timeOuts ){
clearTimeout(timeOuts[key]);
}
}

Not sure how you're adding timeouts to this object, but you'd simply start off by defining it as an object.

timeOuts = {};

or

timeOuts = new Object();

timeOuts['key1'] = "4565465454";

That may be incorrect (Fotiman will set me straight :-) ) but that's where I'd start.

[sssweb]

My script sets the timeOut vars dynamically so I'm not sure how your idea would work. Since the script as is seems to work for clearing the timeouts, will the following work to clear the timeout AND delete the var:

function clearAllTimeouts(){
for(key in timeOuts ){
clearTimeout(timeOuts[key]);
delete timeOuts[key];
}
}

[sssweb]

If I include "alert(timeOuts[key]);" before & after the delete, I get a number before, and "undefined" after -- can I take that to mean the var is correctly deleted?

[sssweb]

OK - I discovered that delete does NOT remove the array element, but I see there's a simpler solution. Once all the timeouts are clear, I can just reset timeOuts to a new array.

So, unless anyone has a comment, this is resolved.