Tengo una función que cuando se presiona el botón Start se llama a un ciclo de 10 iteraciones, donde genera un número del 1 al 7, el cual se sustituye en el switch, donde se debe llamar a funciones a su vez sobre el objeto. Primero cambie css, luego llame a animate y luego cambie css nuevamente, pero en su lugar cambian al mismo tiempo sin esperar el final de la función anterior. ¿Por qué está pasando esto? ¿Y como arreglarlo?

La función

 $('input[Value="Start"]').click(function () { $(this).css("visibility", "hidden"); for (let i = 0; i < 10; i++) { note = Math.floor(Math.random() * 7) + 1; console.log(note); switch (note) { case 1: $('.SightReading_content_show_imeage_note_C').css("visibility", "visible").animate({ 'left': '20%' }, 3000).css({ "visibility": "hidden", "left":"80%"}); break; case 2: $('.SightReading_content_show_imeage_note_D').css("visibility", "visible").animate({ 'left': '20%' }, 3000).css({ "visibility": "hidden", "left": "80%" }); break; case 3: $('.SightReading_content_show_imeage_note_E').css("visibility", "visible").animate({ 'left': '20%' }, 3000).css({ "visibility": "hidden", "left": "80%" }); break; case 4: $('.SightReading_content_show_imeage_note_F').css("visibility", "visible").animate({ 'left': '20%' }, 3000).css({ "visibility": "hidden", "left": "80%" }); break; case 5: $('.SightReading_content_show_imeage_note_G').css("visibility", "visible").animate({ 'left': '20%' }, 3000).css({ "visibility": "hidden", "left": "80%" }); break; case 6: $('.SightReading_content_show_imeage_note_A').css("visibility", "visible").animate({ 'left': '20%' }, 3000).css({ "visibility": "hidden", "left": "80%" }); break; case 7: $('.SightReading_content_show_imeage_note_B').css("visibility", "visible").animate({ 'left': '20%' }, 3000).css({ "visibility": "hidden", "left": "80%" }); break; } } $(this).css("visibility", "visible"); });