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.
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.