0

I currently have 5 divs that I fade down one by one by iterating through a for loop that targets each div.

Currently this works, however the fade down follows the pattern of the count up I do

for(var i = 0; i < numContainers; i++) {
//fades down div block_0
//then div block_1
//then div block_2
//then div block_3
//etc
}

How do I iterate through the for loop and target the divs randomly, so fade down doesnt happen from left to right? but instead like:

for(var i = 0; i < numContainers; i++) {
//fades down div block_2
//then div block_4
//then div block_1
//then div block_3
//= random order
}

Example here: http://codepen.io/anon/pen/waLeLw

user1231561
  • 3,239
  • 6
  • 36
  • 55

1 Answers1

2

You could put the arrays into an array and shuffle it:

function shuffle(o){
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
}

Like this: Example

Community
  • 1
  • 1
Chris Charles
  • 4,406
  • 17
  • 31