Using jQuery to animate a form

Question

I'm trying to use jQuery to do some loading animations and as a part of the user submitting the form, I'm trying to animate it out of the page (just to learn jQuery better).

Here is the form HTML:

 <form id="contactForm"><span>
    <label>
        Name:
    </label>
    <input id='uName' name='Name' type='text' />
    <br />
    <label>
        Phone:
    </label>
    <input id='uPhone' name='Phone' type='text' />
    <br />
    <label>
        Email:
    </label>
    <input id='uEmail' name='Email' type='text' />
    <br />
    <label>
        Company Name:
    </label>
    <input id='cName' name='Company Name' type='text' />
    <br />
    <label>
        Company Address:
    </label>
    <input id='cAddress' name='Company Address' type='text' />
    <br />
    <label>
        Company City:
    </label>
    <input id='cCity' name='Company City' type='text' />
    <br />
    <label>
        Company State:
    </label>
    <input id='cState' name='Company State' type='text' />
    <br />
    <label>
        Company Zip:
    </label>
    <input id='cZip' name='Company Zip' type='text' />
    <br />
    <div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey="6Lc_wwYTAAAAAHNT45Zsw0e0RUiwf7b_SNISyXt0">
    </div>
    <br />
    <button type="button" id='btnSubmit' disabled name='formSubmit'>Submit</button>
    </span>
    </form>

And here is the jQuery I'm trying to use to animate it, but it doesn't seem to be participating. I've checked the console as well and there are no errors. Is it possible to animate a form?

jQuery:

            $('form#contactForm').find('span').animate({
                bottom: '600px'
            }, 1000);

Answer 1

If you try to use animate and top or bottom property, you need to set position: relative (or absolute) to your form. Also do not use a span to wrap your elements.

Here is an example :

$(document).ready(function() {
	   $('#contactForm').animate({
		   top : '200px'
	   }, 5000)
});

form{
	position: relative;
}
label,
input {
	display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="contactForm">
	<label for="name">Name</label>
	<input type="text" id="name" />
	<label for="">Phone</label>
	<input type="text" id="phone" />
</form>

Answer 2

Firstly, you don't have to use span to contain all the form elements, that is not what a span is meant for.

The form can be the same except span

<form id="contactForm">
.....
</form>

For bottom: 600px; to work the form should be absolutely positioned.

So maybe add a style like this

#contactForm{
  position: absolute;
}

This should do it.

Here is a demo http://jsbin.com/cokitu/1/edit?html,css,js,output