同时滑动两个div [英] Slide two divs simultaneously

问题描述

我试图在同一页面中包含两个部分，分别是登录部分和应用程序部分.

I'm trying to have two sections in the same page, a login-section and an app-section.

这个想法是onLoginSubmit()可以将登录部分滑到左侧，而将app部分从右侧滑入.

The idea is onLoginSubmit() to slide out to the left the login-section and slide in from the right the app-section.

考虑以下HTML:

<section id="login-section">

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

</section>

我正在使用的JS:

$('#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.

我正在使用jQuery和jQuery UI. 感谢您的帮助.

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>

这篇关于同时滑动两个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！