通過滑動來替換表單

我正在嘗試創建一個簡單的登錄系統。通過滑動來替換表單

我有一個表格裏面一個小框，有一個文本字段和一個按鈕。當按鈕登錄被按下時，我希望表格向右滑動，並從我之前提到的框的左側出現一個新表格。

我設法創造了類似於這種效果的東西，但它並不認爲這是實現它的最好方法。

我做什麼林在這裏做一個例子： 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() {; 

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

我怎樣才能做得更好？謝謝！

來源

2017-02-24 Grim Reaper

我想你應該把這兩個表格放在絕對位置，並用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/

來源

2017-02-24 13:56:24 Fabio

通過滑動來替換表單

回答

相關問題