jQuery remove appended element

Question

I'm trying to have a form fade away then show a message "connecting your call" then after 3 seconds the "connecting your call" message fades away and after 30 seconds the form comes back. The form is hiding and coming back just find I just can't figure out how to make the dynamic appended tag fade. Any suggestions would be great

$("#form").hide().delay(30000).fadeIn('slow');
$("#formarea").append("<h3>Connecting your call...</h3>").delay(3000).$('h3').fadeOut('slow');

Answer 1

You have a $ selector and should be using find:

$("#form").hide().delay(30000).fadeIn('slow');
$("#formarea")
    .append("<h3>Connecting your call...</h3>")
    .delay(3000)
    .find('h3')
        .fadeOut('slow');

The problem with delaying through is that it only works on the effects queue, and the next item in the chain is not an effects function. Try this:

$("#form").hide().delay(30000).fadeIn('slow');
    $("#formarea")
        .append("<h3>Connecting your call...</h3>")
        .find('h3')
            .delay(3000)
                .fadeOut('slow');