Horizontal walking form does not work

Question

I have a form that initially is display None and negative margin, I wanted when the button was clicked to give the impression that the div was dragged like this site, the side menu, http://preview.imithemes.com/? Theme=Solicitor-WP.

Basically I did a while while the right is different from 0 and I modify the value of the right, but not the impression that is walking, goes at once, follows the code.

I wanted it to stay that way, but to give the impression that it was dragged Form

            <form name="contactform" id="modal_form" method="post">
                <div id="form_title"><h3 id="changeText">Register for valutation</h3></div>  
                <select id="cbBox" name="example">
                 <option value="#">I would like a valutation for</option>
                 <option value="A">A</option>
                 <option value="B">A</option>
                 <option value="-">Other</option>
                </select>                    
                <label class="itens">Property Location<input class="campo" type="text" name="property"></label>
                <label class="itens">First Name<input class="campo" type="text" name="nome1"></label>
                <label class="itens">Last Name<input class="campo" type="text" name="nome2"></label>
                <label class="itens">E-mail<input class="campo" type="email" name="email"></label>
                <label class="itens">Telephone <input class="campo" type="text" name="telefone"></label>
                <label class="itens">Property postcode<input class="campo" type="text" name="postcode"></label>
                <label class="itens">Message<textarea name="conteudo" id="box"></textarea></label>                  
                <input class="button send" type="submit" value="Enviar" onclick="return validar();">
                <input type="button" class="button cancel" value="Cancelar">
            </form>
        </div>
    </div>
    </div>

CSS and JS

/* ESSA FUNÇÃO SERVE PARA ABRIR O POPUP DO FORMULARIO DE CONTATO */

        function modalOpen(){
            $(document).ready(function(e){
             tamanho = $('.modal-box').css("width");
             novoTamanho = $('.modal-box').css("right");
             $('#modal').css("display","block");

             subname = parseInt(novoTamanho.substring(0, novoTamanho.length-2));
            
            while(subname <= 0){
             $('#modal').css("display","block");    
            subname += 10;
            $('#box1').css("right",subname+"px"); 
            }

            /*FECHAR O MODAL SE O BOTÃO CANCELAR FOR PRESSIONADO */
            $('.cancel, #modal').click(function(event){
                if(event.target !== this){
                    return;
                }
                $('#box1').css("right","-450");
            });
        });
        }

.btn_modal{ color: white; margin-bottom: 10px; background-color: darkgrey; border: none; font-size: 19px;}
.btn_modal:hover{background-color: honeydew; color: black;  }
#modal{ background: rgba(0,0,0, 0.1); width: 100%; height: 100%; position: fixed; display: none; left:0; top: 0; z-index: 10000; }
.modal-box{background-color: #FFF; width: 30%; height: 570px; position: absolute; right:-410px; top: 2%;  margin-left: -20%; margin-top: -150px z-index: 10000;;}
#modal_form{display: block; margin: 0 auto; z-index: 10000;}
.itens{ margin-left: 10%; display:block; margin-top: 3%; z-index: 10000;   }
.itens input{ line-height: 10px; display: block; width: 90%; z-index: 10000; }
#bairro{ display: block; margin-right: 10%; width: 155px; z-index: 10000;}
#box{display:flex; margin-top: 0; width:90%; height: 90px; resize: none; z-index: 10000;}
#form_title{text-align: center;background-color: grey; color: white; padding: 0; z-index: 10000;width: 100%; height: 50px; }
#form_title h3{float: left; margin-left: 5%; padding-top: 10px; margin-bottom: 0;}
#modal_form{ width: 80%; height: 400px;z-index: 10000;}
.button{ width: 130px; margin-top: 10px; height: 30px; background-color: grey; color: white;z-index: 10000; display: inline-block; float: right;}
.button:hover{background-color: black;}
#modal_form{width: 100%; height: 430px;}
.cancel{margin-right: 2%;}
.send{margin-right: 8%;}
#cbBox{line-height: 10px; display: block; width: 81%; z-index: 10000; margin-left: 10%; margin-top: 10px;}

Answer 1

You can use the animate() jquery to do this:

$("#box1").animate({right: '0px'});

and to hide again:

$("#box1").animate({right: '-450px'});