views:

199

answers:

4

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?

A: 

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

then it won't show until you fade in

Slee
I'd also add it in your style sheet not inline to keep things nice and clean
Slee
A: 

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);
bendewey
+2  A: 
$('<div id="response"><h1>Success</h1><p>Your email was sent.</p></div>')
    .hide().insertAfter("#sendemail").fadeIn();
cletus
A: 

Thanks for all the answers everyone! Paulo and Max's answer worked great for me. Thanks!

zeckdude