jQuery .animate reveal contact form hidden in div with negative margin above header

I've got my contact form hidden with a negative margin-top, so that when the visitor clicks "Contact" it reveals the div.

<script type="text/javascript">$("#revealContact").click(function(){
     $("#contact").animate({
          marginTop: "+=620px"
    }, 1000);
});</script>

You can view it live here: http://www.brianrhea.com/index_contact.php -- click Contact link in top right

My problem is that as soon as the form is submitted, it inherits the -620 margin and the success (or error) prompt is invisible.

I'm running in to some other cross-compatibility issues as well with the margin spacing so I'm not even sure this is the best way to go about this. Obviously it'd be great if I could just begin with the div as display:hidden and then animate it to visible, but I haven't been able to do that.

Any input is appreciated, either with advice on how to save the margin after form submiss开发者_Go百科ion, or suggestion on better method to achieve this hide/reveal.

Thanks, Brian

---

Click the contact button multiple times, and you get a nasty problem. I'd change the click function around. Just to make it cooler (I don't remember, but there is a function to do this a lot better):

$('#revealContact').click(function()
{
  if ($('#contact').css('marginTop') != '620px')
  {
    $("#contact").stop().animate({marginTop: '620px'}, 1000);
  } else {
    $("#contact").stop().animate({marginTop: '0px'}, 1000);
  }
});

I would suggest not allowing a submit at all, and submitting it via AJAX (and not using a blank action attribute. That's more cross-browser, as people without JS can't even use that form. I'd give that form an id. Let's call it mr_form.

When mr_form is submitted, you can actually force it not to and do your errors without a page refresh:

$('#mr_form').submit(function()
{
  return false;

  $.post('your_contact_file.php', $('#mr_form').serialize(), function(response)
  {
    if (response == 'blah')
    {
      /* Do blah */
    } else {
      /* Blah */
    }
  });
});

For the messages, I'd just set their z-index to -99 or display to none. That makes them invisible, or makes then floating below all the other content (set your content's z-index too). Then, depending on your response message, you can fade in/out or slide, etc. the desired message.

Good luck (just an FYI, this code is untested and might not work. Tell me if it's brokeded, and I'll fix it).

---

Try out some of the built in animations, they can normally do the trick. The key here can be to position the form absolutely, and hide it to begin.

$("#revealContact").click(function(){
     $("#contact").slideDown();
});

---

I got some excellent suggestions and wanted to share my solution in case anyone else comes upon this.

The live version can be seen here: http://www.brianrhea.com -- click Project Request

I begin by placing two separate divs above the content of my site. The first div contains the "Thanks for submitting" content. The other div contains the contact form itself (div id=contactNone). Both of these divs are given display:none in the stylesheet.

My call to action button is a div as below:

<div id="projectRequestHome">
<a href="#">Request a Project</a>
</div>

This references the following js

 $("#revealContact").click(function(){
   $("#contactNone").slideDown('slow');
 });

I have a close button which references the following

 $("#hideContact").click(function(){
   $("#contactNone").slideUp('slow');
 });

For the form, I used a very good AJAX based form found here: www.queness.com/post/160/create-a-ajax-based-form-submission-with-jquery

I am very pleased with the results and grateful for the direction I received here.

Hope others find this helpful!