How do I combine the 'before' method with the 'fadeIn' method in jQuery?

Question

I have a line of jquery that is inserting a div before another div that is already on the page using jQuery's before method:

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

I want the new div to fade in, so I tried to combine the methods in two different ways, but both did not work correctly. Here is what I tried:

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

That didn't work cause it was trying to fade out the #sendmail div and not the one i was inserting. Here's the other attempt I made:

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

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

That also didn't work since the #response div is already inserted when I try to fade it in, so nothing happens.

I feel like I'm really close, but I can't figure it out. Can someone help?

Answer 1

set a css rule on #response to have display: none

then it won't show 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 an extra $() this will call createElement on the response and fade that in. Then it will add the element before the sendEmail element.

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

Basically what that is expanded to is.

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