How to combine the 'before' method with the fadeIn method in jQuery?

Question

I have a jquery string that inserts a div in front of another div that is already on the page, using jQuery before the method:

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

I want the new div to disappear, so I tried to combine the methods in two different ways, but both of them worked incorrectly. Here is what I tried:

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

This did not help, because he was trying to fade out the #sendmail div, not the one I inserted. Here is another attempt I made:

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

This didn't work either, since the #response div is already inserted when I try to quench it, so nothing happens.

I feel that I am very close, but I cannot understand it. Can anyone help?

Answer 1

set css rule for #response to display: none

then it will not appear until you fade in

Answer 2

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

Answer 3

Try adding extra $ (), this will call createElement in response and fade in. Then it will add an element before the sendEmail element.

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

Basically, what is expanded is.

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