使用jQuery制作表单动画

Question

我试图使用jQuery来做一些加载动画，作为用户提交表单的一部分，我试图将其动画出页面(只是为了更好地学习jQuery)。

表单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>

这是我试图使用的jQuery动画，但它似乎没有参与。我也检查了控制台，没有错误。是否有可能使窗体动起来?

jQuery:

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

Answer 1

首先，您不必使用span来包含所有表单元素，这不是span的意义所在。

除了span

外，其他格式都是相同的

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

要使bottom: 600px;起作用，表单必须处于绝对位置。

可以添加这样的样式

#contactForm{
  position: absolute;
}

这个应该可以了。

这里是一个演示http://jsbin.com/cokitu/1/edit?html,css,js,output

Answer 2

如果你尝试使用animate和top或bottom属性，你需要设置position:相对(或绝对)到你的窗体。也不要用span来包装你的元素。

下面是一个例子:

$(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>