textslideをフォームに入れて

Question

私はこの機能の作り方についていくつかアドバイスをいただければ幸いです。私は、フォーム内の人がクリックすると、フォームの上端にテキストが上がるはずのフォームがあります。

テキストが上にスライドしている間、上の境界線はテキストのスペースを確保する必要があります。私はここでのイラストを作った：

私はそれを行うことができますどのように、非常に安全ではないと思います。私はJQueryを使用する必要があることを知っています。だから試作を始めようとしましたが、どこに行くのか分かりません。私は正しい方向に私を導くことができる人がいることを願っていますか？

<form action="/getdata.php"> 
    <input type="text" value="Firstname"> 
    <br><br> 
    <input type="submit" value="Submit"> 
</form> 



$('form').click(function(){ 
$(this).hide(); 
    $('div').animate({marginLeft:"0"},1500); 
}); 

Answer 1

<div class="inputContainer"> 
    <input type="text"> 
    <label>FirstName</label> 
</div> 

は今最初の今

.inputContainer { 
    position: relative; 
} 

inputContainer label { 
    position: absolute; 
    left: 5px; 
    top: 20px; (relative to your input) 
} 

ラベルを操作できるとjQueryで推奨される方法は、フォーカスイベントで、その後、ちょうど変更入力の上にラベルを作ることができますラベルの左と上の小道具。