同时滑动两个div

我正在尝试在同一页面中有两个部分，一个登录部分和一个应用程序部分。

想法是onLoginSubmit（）向左滑出登录部分，然后从应用程序部分右侧滑入。

考虑这个HTML：

我正在使用的JS：

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

会发生的事情是登录部分确实向左滑出但是应用程序部分仅在转换结束后才可见，所以当登录部分离开屏幕时我得到默认背景。

我正在使用jQuery和jQuery UI。 任何帮助表示赞赏。

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

   
some content here 
 
 
 
 
 Toggle 

Answer 2

HTML

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

请检查这个Fiddle

Answer 3

HTML

 
 hi 
 
 there 
 
 click to toggle  

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

演示小提琴https://jsfiddle.net/6cndzc6j/