Question

I am working on a php form with some jquery, especially for the error and thank you messages. The jquery part can be viewed here:
http://jsbin.com/ohuya3
A working example of the form is available here:
http://cozyphant-living.com/php/formular4.htm
You have to hit the “Formular senden” button to see the message panel.
I wanted to make the thank you and or error panel make slide out and have the text fade in. The script is accepting my code (because it is still working) but actually I can not see that the text actually fades in. I have seen samples of sliding panels with fading in text. So it seems to be a wrong kind of coding that I did.
Any help is appreciated.

Answer 1

The problem is that your #formResponse container is not hidden at first. As soon as the response text is inserted into it, it will show directly, instead of fading it in. You need to declare display: none; to hide it:

<div class="contact-form-text" id="formResponse" style="display: none;"></div>

The AJAX callback function will then insert the text into it, and then fade it in.

---

UPDATE: If you want BOTH the slide and the the fade in, then you will need to use an extra response container, because once it slides out, it IS already visible and it can’t fade in from 100% visibility. So what you want would be something like this:

<div id="formResponse_container" style="display:none;"> <!-- extra wrapper -->
    <div id="formResponse" class="contact-form-text" style="display:none;"></div>
</div>

and then in the jQuery script, instead of

$("#formResponse").hide().html(data).show('slow'); //hide before slide!

you would have

$("#formResponse_container").slideDown("slow", function() {
    $("#formResponse").html(data).fadeIn("slow");
});

What that does is, it will first slide down the outer container, and once that animation is completed, it will fade in the inner container.

Live example

Hope this helps.