homepage Welcome to WebmasterWorld Guest from 23.23.8.131
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

    
stopping jquery animations
sssweb

5+ Year Member



 
Msg#: 4435326 posted 5:16 pm on Mar 30, 2012 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4435326 posted 10:47 am on Apr 1, 2012 (gmt 0)

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

5+ Year Member



 
Msg#: 4435326 posted 6:49 pm on Apr 1, 2012 (gmt 0)

Thanks -- I'll look into that.

sssweb

5+ Year Member



 
Msg#: 4435326 posted 2:08 pm on Apr 2, 2012 (gmt 0)

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

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4435326 posted 4:49 pm on Apr 2, 2012 (gmt 0)

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

sssweb

5+ Year Member



 
Msg#: 4435326 posted 5:31 pm on Apr 3, 2012 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4435326 posted 5:45 pm on Apr 3, 2012 (gmt 0)

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

5+ Year Member



 
Msg#: 4435326 posted 8:12 pm on Apr 3, 2012 (gmt 0)

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

5+ Year Member



 
Msg#: 4435326 posted 3:25 pm on Apr 4, 2012 (gmt 0)

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

5+ Year Member



 
Msg#: 4435326 posted 3:44 pm on Apr 4, 2012 (gmt 0)

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

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4435326 posted 4:37 pm on Apr 4, 2012 (gmt 0)

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

5+ Year Member



 
Msg#: 4435326 posted 5:23 pm on Apr 4, 2012 (gmt 0)

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

5+ Year Member



 
Msg#: 4435326 posted 5:38 pm on Apr 4, 2012 (gmt 0)

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

5+ Year Member



 
Msg#: 4435326 posted 7:27 pm on Apr 4, 2012 (gmt 0)

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.

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