Question

I haven’t been able to adapt the examples I have found in stackoverflow that describe how to add a fade to an append, and I can’t work out why.

I have the following code for using ajax to replace a contact form with a success message:

$.ajax({
         type: "POST",
         url: "contact-engine.php",
         data: dataString,
         success: function() {
           $('#contact-form').html("<div id='message-form'></div>");
           $('#message-form').html("<h3>Your message has been submitted successfully!</h3>")
           .hide()
           .fadeIn(2000, function() {
             $('#message-form').append('<p style="text-align:center">Thanks for getting in touch. I will get back to you as soon as possible.</p>');
           });
         }
       });
       return false;

I am trying to get the append to fade in. I tried adding .hide().fadeIn(2000) after the append html, but this didn’t work. Could someone help me out with this?

Thanks,

Nick

Answer 1

If you add hide and fadeIn after append, the problem is that you will be hiding and fading the container, not the element you are adding. If you change it to appendTo it should work:

$(NEW_ELEMENT).appendTo(SOMETHING).hide().fadeIn(2000)

An example: http://jsfiddle.net/U4d9G/