Przesuwanie dwóch elementów div jednocześnie

Question

Próbuję mieć dwie sekcje na tej samej stronie, sekcji logowania i sekcji aplikacji.

Pomysł polega na tym, żeLoginSubmit() wysuwa się po lewej stronie sekcji logowania i wsuwa się z prawej strony sekcji aplikacji.

Rozważmy następujący HTML:

<section id="login-section"> 

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

</section> 

a JS używam:

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

Co się dzieje, że login-sekcja ma przesuwać się w lewo, ale app-sekcja dostaje widoczne tylko po przejście zostało zakończone, więc otrzymuję domyślne tło, gdy sekcja logowania opuszcza ekran.

Używam jQuery i jQuery UI. Każda pomoc jest doceniana.

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; 
    } 

Proszę zaznaczyć to Fiddle

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 skrzypce https://jsfiddle.net/6cndzc6j/