javascript - How do I combine the 'before' method with the 'fadeIn' method in jQuery? - Stack Ov

admin管理员组

文章数量:1279018

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 bine 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?

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 bine 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?

• javascript
• jquery
• effects

Share Improve this question Follow asked Mar 29, 2009 at 0:17 zeckdudezeckdude 16.2k4444 gold badges146146 silver badges194194 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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

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);

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

then it won't show until you fade in

本文标签： javascriptHow do I combine the 39before39 method with the 39fadeIn39 method in jQueryStack Overflow