Add and remove elements repeatedly

[oxxi]

As usual I’m always getting stuck with logic and I can’t figure this one out. Not even sure how to tackle it or how close I am. If you load the following code in a browser and keep refreshing the page, it’s basically what I want the code to do. I want to create the ‘div’ elements and them remove repeatedly to sort of create an animation of divs randomly changing colors. I started to think maybe I need some type of recursive function and that started to get messy. Now I’m at the point that I have setInterval calling runAnimation that has two functions. I thought that it would repeatedly call those two functions and create the random color changes of the divs since the first function creates the div elements and then the other one removes them. I need some clues on how to achieve this or what’s wrong with my code? I really want to understand how to solve problems like this.

https://dl.dropboxusercontent.com/u/1957768/loops.html

[Paulie_D]

I want to create the ‘div’ elements and them remove repeatedly to sort of create an animation of divs randomly changing colors.

Not sure that removing them from the DOM and adding them back just to change the background is the best option here.

[chrisburton]

Create a Pen

[Chromawoods]

Not sure if it answers your question, but I made something similar as an experiment:

Demo: http://chromawoods.com/bricklr/demo/
Source: https://github.com/chromawoods/bricklr

It has a few options to play around with and you might just achieve something like what you are trying to do. If not, maybe make a feature-request and I’ll update it. :)

[oxxi]

I figured it out, Lol! My brain hurts though. Anyways the big clue came from Paulie_D. Adding and removing the elements was definitely not the best option. That got me on the right track to just manipulate the color changes through a function and then call it with setInterval. Now the code does exactly what I wanted. Thx for the tips everyone.

http://jsfiddle.net/sAs4Y/4/

[Author]

Posts