Comment puis-je combiner la méthode « avant » avec la méthode « fadeIn » dans jQuery?

Question

J'ai une ligne de jquery qui est une div insérait avant une autre div qui est déjà sur la page en utilisant la méthode avant de jQuery:

$("#sendEmail").before('<div id="response"><h1>Success</h1><p>Your email was sent.</p></div>');

Je veux que le nouveau div à disparaître, donc j'ai essayé de combiner les méthodes de deux façons différentes, mais les deux ne fonctionnait pas correctement. Voici ce que j'ai essayé:

$("#sendEmail").before('<div id="response"><h1>Success</h1><p>Your email was sent.</p></div>').fadeIn("slow");

Cela ne fonctionne pas parce que ça essayait de disparaître le #sendmail div et non celui que j'insérait. Voici l'autre tentative, je fait:

$("#sendEmail").before('<div id="response"><h1>Success</h1><p>Your email was sent.</p></div>');                             

$("#response").fadeIn("slow");

Cela aussi ne fonctionne pas depuis le div #response est déjà inséré lorsque je tente de fade, donc rien ne se passe.

Je sens que je suis vraiment proche, mais je ne peux pas le comprendre. Quelqu'un peut-il aider?

Answer 1

définir une règle de css sur #response avoir display: none

alors il ne sera pas affiché jusqu'à ce que vous en fanent

Answer 2

$('<div id="response"><h1>Success</h1><p>Your email was sent.</p></div>')
    .hide().insertAfter("#sendemail").fadeIn();

Answer 3

Essayez d'ajouter un $ supplémentaire () ce appellera createElement sur la réponse et à la décoloration que. Ensuite, il ajoutera l'élément avant l'élément sendEmail.

$("#sendEmail").before($('<div id="response"><h1>Success</h1><p>Your email was sent.</p></div>').fadeIn("slow"));

En fait ce qui est dilatée à est.

var responseDiv = $('<div id="response"><h1>Success</h1><p>Your email was sent.</p></div>')
  .fadeIn("slow");
$("#sendEmail").before(responseDiv);