Geek Answers Handbook

Move two divs at the same time

I am trying to have two sections on one page, a login section and an application.

The idea is that onLoginSubmit () flips the login section to the left and moves to the right of the application.

Consider this HTML:

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

And JS I use:

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

What happens is that the login section will exit to the left, but the application only becomes visible after the transition has ended, so I get the default background when the login section exits the screen.

I am using jQuery and jQuery UI. Any help is appreciated.

+6
source share
3 answers

 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>
+1
source

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

Please check Fiddle

0
source

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

0
source

More articles:


All Articles