javascript - Can't get colour of div to change using loop / switch statement combination -

i'm trying make simple memory game, shape flashes on screen x number of times , user has remember colour.

i'm trying use loop combined switch statement change colour on each iteration. however, colour not change , i'm stuck.

can tell me i'm doing wrong?

code follows:

$(document).ready(function() {  var colorarray = []; // stores colours have been generated  var changecolour = function(){ var generateshape = math.floor(math.random() * 5) // generates number 0-4  switch (generateshape){             case 0:                 $('#shapediv').css('background-color','black');                 $('#shapediv').fadeout(500);                 colorarray.push('b');                 break;             case 1:                 $('#shapediv').css('background-color','red');                 $('#shapediv').fadeout(500);                 colorarray.push('r');                 break;             case 2:                 $('#shapediv').css('background-color','yellow');                 $('#shapediv').fadeout(500);                 colorarray.push('y');                 break;             case 3:                 $('#shapediv').css('background-color','blue');                 $('#shapediv').fadeout(500);                 colorarray.push('bl');                 break;             case 4:                 $('#shapediv').css('background-color','pink');                 $('#shapediv').fadeout(500);                 colorarray.push('p');                 break;         }; }  $('#subbutton').click(function(){          // make shape appear 5 times random colour     while (colorarray.length<5){          $('#shapediv').fadein(500);         changecolour();      }; }) }); 

the problem is, while loop runs , creates random numbers. fadein , fadeout asynchron. loop done in far under 500ms , generateshape last generated value used in switch.

i cant think of easy change code avoiding this. think have work out other solution asynchron nature of annimations in mind.