textslide in einem Formular

Question

Ich hoffe, ich kann einen Rat bekommen, wie man diese Funktion macht. Ich habe ein Formular, wo die Funktion sein sollte, dass wenn eine Person in das Formular klickt, der Text auf dem oberen Rand des Formulars nach oben verschoben werden soll.

Während der Text nach oben gleitet, sollte der obere Rand Platz für den Text bieten. Ich machte eine Darstellung hier:

Ich bin ziemlich unsicher, wie ich das tun kann. Ich weiß, dass ich JQuery verwenden muss. Also habe ich versucht, einen Prototyp daraus zu machen, aber ich weiß nicht wohin. Ich hoffe, es gibt jemanden, der mich in die richtige Richtung lenken kann?

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

Nun läßt zuerst das Etikett auf der Oberseite des Eingangs machen

.inputContainer { 
    position: relative; 
} 

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

jetzt Sie das Etikett manipulieren und mit jQuery die empfohlene Methode ist der Fokus Ereignis, und dann nur das ändern linke und obere Stütze des Etiketts.