How to use jQuery fadeIn with element created using .after?

Question

I am new to jQuery and am trying to gracefully submit a form using AJAX rather than the traditional post method. So far I do the following to hide the form and prevent it from submitting:

$(document).ready( function() {
    $("#contact_me").submit( function(event) {
        event.preventDefault();
    });

    $('input#submit').click( function() {
        $('#contact_me').fadeOut( 1000, function() {
            $('#contact_me').hide();
            $('#contact_me').after( '<p class="submission_text">Thank you for contacting me. I will contact you shortly.</p>' );
        } );
    });
});

However, ideally, I would like the p.submission_text to fade in after the form has been hidden. However, if I append the following after the call to .after , the text does not fade in, it just appears:

$('.submission_text').fadeIn( 600 );

How can I get the behaviour I want?

Answer 1

.submission_text needs to be hidden in the first place in order to fade in. Try this:

$(document).ready( function() {
    $("#contact_me").submit( function(event) {
        event.preventDefault();
    });

    $('input#submit').click( function() {
        $('#contact_me').fadeOut( 1000, function() {
            var $p = $('<p class="submission_text" style="display:none">Thank you for contacting me. I will contact you shortly.</p>');

            $('#contact_me').hide();
            $('#contact_me').after( $p );

            $p.fadeIn( 600 );
        } );
    });
});

Answer 2

Because you are appending p tag with class 'submission_text' dynamically using jquery so,use event delegation as shown :

$(document).on('click','input#submit',function(){
  $('.submission_text').fadeIn( 600 );
});

Answer 3

Add the p.submission element as a hidden element initially with .hide() as follows:

$('input#submit').click( function() {
    $('#contact_me').fadeOut( 1000, function() {
        $('#contact_me').after( '<p class="submission_text">TEXT</p>')
        .hide()
        .fadeIn(600);
    } );
});