How to make exit animation?

Question

JavaScript

Tell me, who has already done animation on jquery, how to make animation on jquery correctly, when you click on the keyboard exit button, the text field exits from above, and the keyboard is on the right. Pressing another button reverses the county of the keyboard and and the text box.

Here is the markup I have:

<style> body, html {
  margin: 0 auto;
  padding: 0;
  text-align: center;
  width: 1080px;
  heigth: 10920px;
}

.mybutton {
 align="center"
}

.mybutton {
  width: 40px;
  height: 40px;
  margin: 2px;
}

.nbsp {
  width: 220px;
}

#serch {
  margin:60px;
  width: 80px;
}

.form-controls {
    margin: 100px auto;
    padding: 0;
    width: 650px;
    height: 221px;
    background-color: #9E9E9E;
}

.form-control{
  height: 20px;
  margin-top:40px;
  width: 300px;	
}



.enter {
  width: 70px;
  
}

.serch_fild_block {
width:100%;
height:200px;
-webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.52);
-moz-box-shadow:    3px 3px 5px 0px rgba(50, 50, 50, 0.52);
box-shadow:         3px 3px 5px 0px rgba(50, 50, 50, 0.52);	
  
}





</style>

<div class="serch_fild_block">
<input id="phone" type="text" class="form-control"    placeholder="Введите слово для поиска" name="phone"  required/>
<button id="serch" type="button" class="mybutton" required="">Искать</button>
</div>

Or tell me an example where this has already been implemented ...

Answer 1

Change the class of the parent\input and the keyboard on click and write the necessary styles for them.

$(document).on("click", "button", function(){
   $("блок").toggleClass("класс"); 
});