I'm trying to have two sections in the same page, a login-section and an app-section.
The idea is onLoginSubmit() to slide out to the left the login-section and slide in from the right the app-section.
Consider this HTML:
<section id="login-section">
</section>
<section id="app-section" style="display: none;">
</section>
And the JS I am using:
$('#login-section').toggle("slide", { direction: "left" }, 500);
$('#app-section').toggle("slide", { direction: "right" }, 500);
What happens is that the login-section does slide out left but the app-section only gets visible after the transition has ended, so I get the default background when the login-section is leaving the screen.
I am using jQuery and jQuery UI. Any help is appreciated.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With