フォームをスライドさせて置き換える

Question

私は簡単なログインシステムを作成しようとしています。

私は、フォームの内部に、テキストフィールドとボタンの2つの小さなボックスがあります。ボタンログインが押されたら、フォームを右にスライドさせ、前に述べたボックスの左側から新しいフォームを出す。

私はこの効果と似たようなものを作りましたが、これを行うのが最良の方法ではないと私は考えています。

私はImはここでやって何の例を作った： JSFiddle

これは、フォームを変更するためのコードです：

$(document).ready(function() { 
     $('#loginDiv').hide(); 
     $('#loginB').click(function() { 
      $('#signupDiv').fadeOut(400).animate({ 
       'margin-left': '30vw' 
       }, {duration: '500', queue: false, complete: function() { 
         $('#loginDiv').fadeIn(400).animate({ 
          'margin-left': '0vw' 
          }, {duration: '500', queue: false, complete: function() {; 

         }}); 
      }}); 
     }); 
    }); 

は、どのように私はこれを改善することができますか？ ありがとう！

Answer 1

私はあなたが絶対位置に2つのフォームを配置し、JQueryで左の位置をアニメーションする必要があると思います。この例のように：

HTML

<div id="divContainer"> 
    <div id="divSignup"> 
    div Signup 
    </div> 
    <div id="divLogin"> 
    div Login 
    </div> 
</div> 

CSS

#divContainer { 
    width: 500px; 
    height: 500px; 
    overflow: hidden; 
    position: relative; 
} 

#divSignup, 
#divLogin { 
    width: 500px; 
    height: 500px; 
    position: absolute; 
    font-size: 30px; 
    color: white; 
    text-align: center; 
    overflow: hidden; 
    top: 0; 
} 

#divSignup { 
    background-color: blue; 
    left: 0; 
} 

#divLogin { 
    background-color: red; 
    left: 500px; 
} 

jQueryの

$('#divSignup').click(function() { 

    $('#divSignup').animate( 

    { "left": "-500px"}, 
    { duration: 500, 
    step: function(nowLeft) { 

       var curLeft = nowLeft + 500; 

       $('#divLogin').css('left', curLeft); 

    } 
    } 
) 

}); 

https://jsfiddle.net/fabio1983/x5e3xzqf/