同时移动两个div

Question

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

想法是在 onLoginSubmit() 函数中将登录部分向左滑出，并从右侧滑入应用程序部分。

考虑以下 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);

发生的情况是登录部分向左滑动，但在过渡结束之后才会显示应用程序部分，因此当登录部分离开屏幕时，我会得到默认背景。

我正在使用jQuery和jQuery UI。任何帮助都将不胜感激。

- hpinhal

---

这个想法存在真正的安全问题。即使没有登录，所有的私人内容都将可见。 display：none 只是在呈现的文档中看不见，但不在代码中看不见，所以所有人都能看到成功登录后的内容。 - Marcos Pérez Gude

我知道这个。这只是我为了学习前端而做的一个小项目。 - hpinhal

学习前端包括安全和最佳实践。学习错误的方法并不是真正的学习。 - Marcos Pérez Gude

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>

- Kalu Singh Rao

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

请检查这个Fiddle。

- Aneesh Sivaraman

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

示例代码 https://jsfiddle.net/6cndzc6j/

- Andrew