jQuery Panel - slideOut and fadeIn function at the same time problem.

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

Use .show() with a duration for the simultaneous slide+fade effect you want, in your case:

$("#formResponse").html(data).show('slow')

You can test out the effect here.

---

For your code specifically you need to remove margin: 0 auto; from the #formResponse object, resulting in the trouble with the above animation code. Also you can serialize your form in a bit easier-o-maintain way, like this overall:

$("#contact_form").submit(function() {
  var arr = $(this).serializeArray();         //serialize form, based on names
  arr.push({ name: 'senden', value: 'yes' }); //add the senden variable
  $.post('mail.php', arr, function(data) {    //pass that object as your data
    $("#formResponse").hide().html(data).show('slow'); //hide before slide!
  }, 'text');
  return false;
});

Answer 2

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.