使用jQuery來動畫表單

我想使用jQuery來做一些加載動畫，並且作爲用戶提交表單的一部分，我試圖將它從頁面動畫化（只是爲了更好地學習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);

來源

2015-05-18 user3267755

首先，你不必使用span包含所有的表單元素，這是不是一個跨度是爲。

的形式可以是除了跨度

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

對於bottom: 600px;工作形式同樣要絕對定位。

所以也許添加一個樣式像這樣

#contactForm{ 
    position: absolute; 
}

這應該這樣做。

這裏是一個演示http://jsbin.com/cokitu/1/edit?html,css,js,output

來源

2015-05-18 15:50:18 Dhiraj

謝謝，這個工作。只有理由我有跨度，我讀了另一個SO帖子，它需要動畫非圖像。 – user3267755

如果您嘗試使用動畫和頂部或底部的財產，你需要設置的位置是：相對（或絕對）到表單中。也不要用span來包裝你的元素。

下面是一個例子：

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

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

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

來源

2015-05-18 15:58:15

使用jQuery來動畫表單

回答

相關問題