Trượt hai div đồng thời

Question

Tôi đang cố gắng có hai phần trong cùng một trang, một phần đăng nhập và một phần ứng dụng.

Ý tưởng là onLoginSubmit() để trượt sang bên trái phần đăng nhập và trượt từ bên phải phần ứng dụng.

Cân nhắc HTML này:

<section id="login-section"> 

</section> 
<section id="app-section" style="display: none;"> 

</section> 

Và JS Tôi đang sử dụng:

$('#login-section').toggle("slide", { direction: "left" }, 500); 
$('#app-section').toggle("slide", { direction: "right" }, 500); 

gì xảy ra là đăng nhập phần không trượt ra khỏi trái nhưng ứng dụng phần chỉ được nhìn thấy sau khi quá trình chuyển đổi đã kết thúc, vì vậy tôi nhận được nền mặc định khi phần đăng nhập rời khỏi màn hình.

Tôi đang sử dụng jQuery và jQuery UI. Bất kỳ trợ giúp nào được đánh giá cao.

Answer 1

var $div1 = $('#login-section'), 
 
    $div2 = $('#app-section'), 
 
    currentDiv = 'div1', 
 
    $button = $('button'); 
 

 
$div2.hide(); 
 
$button.text('Toggle ' + currentDiv); 
 

 
$(document).on('click', 'button', function (evt) { 
 
    $div1.toggle('slide', {direction: 'right'}, 'slow'); 
 
    $div2.toggle('slide', {direction: 'left'}, 'slow'); 
 
    
 
    currentDiv = (currentDiv === 'div1') ? 'div2' : 'div1'; 
 
    $button.text('Toggle ' + currentDiv); 
 
});

#login-section{ 
 
    width: 500px; 
 
    height: 100px; 
 
    background-color: green; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 

 
#app-section{ 
 
    width: 500px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
} 
 

 
.container { 
 
    width: 800px; 
 
    position: relative; 
 
    left: 100px; 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script> 
 
<p>some content here </p> 
 
<div class="container"> 
 
    <div id="login-section"></div> 
 
    <div id="app-section"></div> 
 
</div> 
 
<button>Toggle</button>

Answer 2

HTML

<section id="login-section" > 

</section> 
<section id="app-section" style="display: none;"> 

</section> 

JS

$(document).ready(function() { 

$('#login-section').toggle("slide", { direction: "left" }, 500); 
$('#app-section').toggle("slide", { direction: "right" }, 500); 

}) 

CSS

#login-section { 
     background: red; 
     //padding: 20px; 
     width: 100%; 
     height: 100%; 
     left : 0; 
     top : 0; 
     position : absolute; 
    } 

    #app-section { 
     background: blue; 
     //padding: 20px; 
     width: 100%; 
     height: 100%; 
     right:0; 
     top : 0; 
    } 

Vui lòng kiểm tra Fiddle này

Answer 3

HTML

<section id="login-section"> 
hi 
</section> 
<section id="app-section"> 
there 
</section> 
<div id="toggle-sections"> 
click to toggle 
</div> 

CSS

#login-section { 
background-color: green; 
} 

#app-section { 
    background-color: blue; 
    display: none; 
} 

#login-section, #app-section { 
    position: absolute; 
    width: 100%; 
    top: 0px; 
} 

#toggle-sections { 
    position: relative; 
    top: 50px; 
} 

JQuery

$('#toggle-sections').click(function() { 
    $('#login-section').toggle("slide", { direction: "left" }, 500); 
    $('#app-section').toggle("slide", { direction: "right" }, 500); 
}); 

Demo fiddle https://jsfiddle.net/6cndzc6j/