Difficulties with jQuery's fadeIn() & hide()

Question

I'm guessing I am misunderstanding how to accomplish a fadeIn() of an element which I am adding via jquery.form.js, but after trying things I've found on other posts I have gotten nowhere. I'm still learning jQuery and javascript so maybe my error is something simple there.

I have the following line of code in the success of my jquery.form.js ajaxForm

jQuery('#aThankYouTarget').append(jQuery("<p>"+data+"</p>")).fadeIn(1000);

I have tried variations on this line and cannot seem to see fading results. My data is coming up exactly as expected, it just lacks the fade. I have also tried putting a hide() in like follows, but when I do that the hide seems to work but the fadeIn never happens there either.

jQuery('#aThankYouTarget').append(jQuery("<p>"+data+"</p>").hide()).fadeIn(1000);

Also as suggested on another question here I have tried with data as follows. I think it was "text" that I used anyway, as I have long since forgotten what that person suggested when it wasn't working either.

jQuery('#aThankYouTarget').append(jQuery("<p></p>").text(data.content).hide()).fadeIn(1000);

I'd really prefer something similar to my first example as it keeps the paragraph section of the javascript looking the most like the html will in the end and I feel it is easier to read, but if someone wants to talk me into creating the element, and adding text to it I could probably be persuaded. The main thing is that I find out how to get the fadeIn() working.

Thank you.

Edit: #aThankYouTarget is a div, with paragraphs inside of it. When the page is loaded some paragraphs are possibly already there. The fadeIn I wish to do is for any newly added paragraphs after the form submission to fade in.

Answer 1

You were awfully close. You do need to .hide() first, but you were fading the wrong thing!

jQuery("<p>"+data+"</p>").appendTo('#aThankYouTarget').hide().fadeIn(1000);

Note: switched the order around so that the <p> becomes the main object. .hide() and .fadeIn() will now both operate on the <p>, after it has been appended.