Search code examples
javascriptjqueryhtmlcssfade

FadeIn FadeOut multiple divs randomly


I'm creating some divs with jQuery and want them to randomly fade in and fade out. I currently have it partly working but it's just one div and the rest disappears.

I just want a couple of divs to fade in and fade out randomly. So from time to time some of them needs to be gone and then pop in after a while. And this needs to go on as long as the page is on. So a loop forever a.k.a a recursive function!

This is what I've got so far: http://jsbin.com/qifavaceva/edit?js,output

I think i need to push all the divs into an array. Pick random values from that array and then animate those.

Anyone has some idea on how to do this?

Kind regards


Solution

  • Just one dot at a time? The following works if you move the line 'markerArry.push(marker)' to within your createMarker function.

    function fadeRandom() {
      var rand = Math.floor(Math.random() * markerArray.length);
      el = $('.animatedDots div:nth-child(' + rand + ')');
      el.fadeOut('1000').delay(2000).fadeIn('1000',fadeRandom);   
    }