Question

I am trying to do some tricky things with animations in a queue function. I hesitated to post my original code here since it’s long and messy. But I’ve boiled down the problem I’m having to the following example (I’m coding the queue using this method by Alnitak: jQuery: code stops working after adding delay() and removeClass()):

http://jsfiddle.net/AYMY7/6/

This is an attempt to write a program that will animate the prime power factorization of 100. It’s constructed with a for loop in which the #target div receives new html each time with ‘span’ tags around the piece that needs to be replaced. Then the ‘span’ned part is supposed to fade out, be replaced by something, and fade in. If you run it you’ll see that fade in/out only works the first time in the loop and then stops. My guess is that it is because when the next iteration replaces the html in the #target div, the ‘span’ tags are treated as something new and not affected by the original ‘span’ queue. I don’t know if that made any sense, but if you study the code and run it, you’ll see what I mean.

I’ve tried fixing it with classes and id’s but I think the same core problem is still there. Can anyone see a way to fix this?

I thought I fixed it by adding separate div’s for each piece and changing the array:

http://jsfiddle.net/nQjBw/2/

This just about works great, except there are these little twitches that seem to happen randomly. So if someone can see how to fix this instead that would be awesome.

In either case I need a solution that isn’t specific to factoring numbers, as I’m trying to use this method for a bigger project.

Thanks!

Answer 1

This seems to work:

http://jsfiddle.net/EHJfR/