Exécuter des événements jquery simultanément

Question

J'ai donc un questionnaire jquery. Et pour pouvoir commencer le quiz, vous devez cliquer sur le bouton "Démarrer". En cliquant sur, le texte de l'en-tête est supprimé et le quiz est centré verticalement (tout cela doit se produire simultanément). Cependant, en raison de mon code, le texte d'en-tête est retiré puis le quiz est centré. Comment puis-je les faire fonctionner en même temps?

Voici mon code défectueux:

$('#get-started').click(function(){ 
    $('#index-banner').fadeOut(200, "swing"); 
    $('#begin-exam').delay(210).fadeOut(180, "swing"); 

    setTimeout(function(){ 
     $('#content').animate({top:'25%'},700).addClass('center-exam'); 
    }, 209); 

    }); 

La classe « centre-examen », ajoute simplement une position de « absolue » au quiz afin qu'il puisse être centré verticalement

Answer 1

Lorsque vous enchaînez ensemble votre .animate et votre .addClass en les connectant avec le '.' L'un s'exécute et se termine, puis l'autre s'exécute. En les faisant figurer dans des déclarations distinctes, ils peuvent être et se dérouleront aussi près que possible simultanément.

$('#get-started').click(function(){ 
$('#index-banner').fadeOut(200, "swing"); 
$('#begin-exam').delay(210).fadeOut(180, "swing"); 

setTimeout(function(){ 
    $('#content').animate({top:'25%'},700); 
    $('#content').addClass('center-exam'); 
}, 209); 
});