fadeIn after jQuery post
<p>I have three forms on one page - "callback", "contact us" and "newsletter subscription".</p>

<p>Each has it's own jQuery function to "post" the data (using <code>.post</code>) and then display any returned PHP. These forms only output simple error and successes depending on the form and the process.</p>

<p>Now, here is where it gets a bit odd... all three of my forms work but only two work as expected:</p>

<ol>
<li>Response DIV hides</li>
<li>Response DIV fills with returned HTML</li>
<li>Response DIV fades in nicely.</li>
</ol>

<p>My main "contact us" form, however, is the odd one out... the response DIV immediately appears with no fade effects.</p>

<p>I have read that I should first "hide()" the DIV - which I have tried without any success and nothing seems to work.</p>

<p>I have noticed that if I return purely text (echoed by PHP) then the fade works.... but when I try to get it to output any HTML tags then it all fails and the DIVs appear immediately...</p>

<p>My Form response:</p>

<p><code>&lt;div&gt;&lt;span id="contactUsAjaxResponse"&gt;&lt;/span&gt;&lt;div&gt;</code></p>

<p>My jQuery function</p>

<pre><code>$(document).ready(function(){
$("#contactUsForm").submit(function(){
var responseDiv = '#contactUsAjaxResponse';
// add ajax-loader class to response div
$(responseDiv).html('').addClass('ajax-loader');
// get form actiom
var formAction = $(this).attr('action');
$.post(formAction, $("#contactUsForm").serializeArray(), function(data){
$(responseDiv).removeClass('ajax-loader').html(data).fadeIn('slow');
});
return false; //prevent default form action
});
});
</code></pre>

<p>Any echoed HTML is <code>&lt;php echo '&lt;div class="error"&gt;Content...&lt;/div&gt;'; ?&gt;</code> etc.</p>

<p>I have a feeling it could be my CSS (could any <code>display: block;</code> or other entries be causing the problem?)</p>

<p>Many Thanks</p>
