Comment masquer div, lorsque l’utilisateur saisit «entrées» et passe au div suivant

C’est mon HTML:



Je veux faire, si l’utilisateur finit de taper quelque chose sur l’entrée Q et fait la même chose sur l’entrée A, div qui a été récemment utilisée, fadeOut;)

Mon javascript:

 var nowWord = 1; var focusOuts = 0; $(document).ready(function() { $("#word" + nowWord + " > .Q").focusout(divFocusOut()); $("#word" + nowWord + " > .A").focusout(divFocusOut()); function divFocusOut(){ focusOuts++; if(focusOuts == 2){ $("#word" + nowWord).fadeOut(1000); focusOuts = 0; } } }); 

Le problème est: div fadeOut par lui-même sans aucune action de l’utilisateur, juste après le chargement du site. Qu’est-ce qui ne va pas?

DEMO ICI

 $(document).ready(function(){ $(".Q,.A").blur(function(e){ if($(this).val().length>0 && $(this).siblings("input").val().length>0){ $(this).parent().fadeOut(1000); } }); }); 
 $("#word" + nowWord + " > .Q").focusout(divFocusOut()); $("#word" + nowWord + " > .A").focusout(divFocusOut()); 

Cela fait cela sans action de l’utilisateur. Si vous définissez le css ici sans fade, le problème a disparu. Ou tout simplement définir le CSS au début sans JavaScript.

Ou mettez cela dans la fonction, si vous voulez que cela se produise, mais pas au chargement de la page.