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

之外，表格可以相同

<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：relative（或absolute）。也不要使用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>

使用jQuery为表单设置动画

2 个答案: