滑動接觸形式 - 速度問題

Question

所以我想在我的網頁上添加滑動接觸形式一切工作正常，但我無法承諾爲什麼滑動/出來速度慢。你能幫我理解這個問題嗎？

這裏是鏈接：http://codepen.io/anon/pen/OywyBb

HTML：

<div id="slider" class="form-div" style="right:-500px"> 
       <aside id="sidebar" onclick="open_panel()"> 
        <img src="http://www.pedleyandco.com/images/pedley/contact_button_vertical_text.png"/> 
       </aside> 

       <form class="form" id="form1"> 

       <p class="name"> 
        <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" /> 
       </p> 

      <p class="email"> 
        <input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" /> 
      </p> 

      <p class="text"> 
        <textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea> 
      </p> 


      <div class="submit"> 
        <input type="submit" value="SEND" id="button-blue"/> 
       <div class="ease"></div> 
     </div> 
    </form> 
    </div> 
</body> 

JS

function open_panel() 
{ 
slideIt(); 
var a=document.getElementById("sidebar"); 
a.setAttribute("id","sidebar1"); 
a.setAttribute("onclick","close_panel()"); 
} 

function slideIt() 
{ 
    var slidingDiv = document.getElementById("slider"); 
    var stopPosition = 0; 

    if (parseInt(slidingDiv.style.right) < stopPosition) 
    { 
     slidingDiv.style.right = parseInt(slidingDiv.style.right) + 2 + "px"; 
     setTimeout(slideIt, 1); 
    } 
} 

function close_panel(){ 
slideIn(); 
a=document.getElementById("sidebar1"); 
a.setAttribute("id","sidebar"); 
a.setAttribute("onclick","open_panel()"); 
} 

function slideIn() 
{ 
    var slidingDiv = document.getElementById("slider"); 
    var stopPosition = -342; 

    if (parseInt(slidingDiv.style.right) > stopPosition) 
    { 
     slidingDiv.style.right = parseInt(slidingDiv.style.right) - 2 + "px"; 
     setTimeout(slideIn, 1); 
    } 
} 

CSS

.form-div { 
    background-color:rgba(72,72,72,0.4); 
    padding-left:35px; 
    padding-right:35px; 
    padding-top:35px; 
    padding-bottom:50px; 
    width: 450px; 
    margin-top:30px; 
    float: right; 
    -moz-border-radius: 7px; 
    -webkit-border-radius: 7px; 
} 

.feedback-input { 
    color:#3c3c3c; 
    font-family: Helvetica, Arial, sans-serif; 
    font-weight:500; 
    font-size: 18px; 
    border-radius: 0; 
    line-height: 22px; 
    background-color: #fbfbfb; 
    padding: 13px 13px 13px 54px; 
    margin-bottom: 10px; 
    width:100%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
    border: 3px solid rgba(0,0,0,0); 
} 

.feedback-input:focus{ 
    background: #fff; 
    box-shadow: 0; 
    border: 3px solid #3498db; 
    color: #3498db; 
    outline: none; 
    padding: 13px 13px 13px 54px; 
} 

.focused{ 
    color:#30aed6; 
    border:#30aed6 solid 3px; 
} 

/* Icons ---------------------------------- */ 
#name{ 
    background-image: url(http://rexkirby.com/kirbyandson/images/name.svg); 
    background-size: 30px 30px; 
    background-position: 11px 8px; 
    background-repeat: no-repeat; 
} 

#name:focus{ 
    background-image: url(http://rexkirby.com/kirbyandson/images/name.svg); 
    background-size: 30px 30px; 
    background-position: 8px 5px; 
    background-position: 11px 8px; 
    background-repeat: no-repeat; 
} 

#email{ 
    background-image: url(http://rexkirby.com/kirbyandson/images/email.svg); 
    background-size: 30px 30px; 
    background-position: 11px 8px; 
    background-repeat: no-repeat; 
} 

#email:focus{ 
    background-image: url(http://rexkirby.com/kirbyandson/images/email.svg); 
    background-size: 30px 30px; 
    background-position: 11px 8px; 
    background-repeat: no-repeat; 
} 

#comment{ 
    background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg); 
    background-size: 30px 30px; 
    background-position: 11px 8px; 
    background-repeat: no-repeat; 
} 

textarea { 
    width: 100%; 
    height: 150px; 
    line-height: 150%; 
    resize:vertical; 
} 

input:hover, textarea:hover, 
input:focus, textarea:focus { 
    background-color:white; 
} 

#button-blue{ 
    font-family: 'Montserrat', Arial, Helvetica, sans-serif; 
    float:left; 
    width: 100%; 
    border: #fbfbfb solid 4px; 
    cursor:pointer; 
    background-color: #3498db; 
    color:white; 
    font-size:24px; 
    padding-top:22px; 
    padding-bottom:22px; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    transition: all 0.3s; 
    margin-top:-4px; 
    font-weight:700; 
} 

#button-blue:hover{ 
    background-color: rgba(0,0,0,0); 
    color: #0493bd; 
} 

.submit:hover { 
    color: #3498db; 
} 

.ease { 
    width: 0px; 
    height: 74px; 
    background-color: #fbfbfb; 
    -webkit-transition: .3s ease; 
    -moz-transition: .3s ease; 
    -o-transition: .3s ease; 
    -ms-transition: .3s ease; 
    transition: .3s ease; 
} 

.submit:hover .ease{ 
    width:100%; 
    background-color:white; 
} 

@media only screen and (max-width: 580px) { 
    #form-div{ 
     left: 3%; 
     margin-right: 3%; 
     width: 88%; 
     margin-left: 0; 
     padding-left: 3%; 
     padding-right: 3%; 
    } 
} 


#slider{ 
    width:500px; 
    top:100px; 
    position:absolute; 
} 




#sidebar{ 
    position:absolute; 
    top:180px; 
    left:-50px; 
    box-shadow: 0 0 8px gray; 
} 

#sidebar1{ 
    position:absolute; 
    top:180px; 
    left:-50px; 
    box-shadow: 0 0 8px gray; 
} 

Answer 1

嘗試上線增加了數字 「2」 slidingDiv.style.right = parseInt(slidingDiv.style.right) + 2 + "px";

看起來像是定義滑塊在每個循環中應該移動多少。

編輯：雖然我認爲使用jQuery animate()：並操作right CSS屬性會更好，因爲滑塊現在閃爍。