Jquery從右側滑入div，並將老div滑出屏幕左側

Question

我有2個div，其中包含2個屏幕的信息。

<-- <div id="div1"> | <-- <div id="div2"> 

我想複製某些應用程序中使用的移動。也就是說＃div1顯示在屏幕上，但是當點擊一個按鈕時，＃div2從右側滑入，而＃div1向左滑動。 ＃div2上的按鈕反轉佈局。

我不是一個css或jquery的傢伙，但我很確定這是可以實現的，並在我的能力範圍內提供一些建議。這甚至可以用純CSS來完成。

任何人都可以幫忙嗎？

Answer 1

您可以使用jQuery動畫功能是這樣的：

HTML：

<div class="wrapper"> 
<div id="div1"> 
    <input type="button" id="btn1" value="btn1" /> 
</div> 
<div id="div2"> 
    <input type="button" id="btn2" value="btn2" /> 
</div> 

CSS：

.wrapper { 
width:200%; 
overflow:hidden; 
position:relative; 
left:0; 
} 
#div1 { 
width:50%; 
float:left; 
} 
#div2 { 
width:50%; 
float:left; 
} 

和javascript：

$("#btn1").click(function() { 
$(".wrapper").animate({ 
    left: "-100%" 
}, 1000); 
}); 

$("#btn2").click(function() { 
$(".wrapper").animate({ 
    left: "0" 
}, 1000); 
}); 

這裏有一個fiddle

希望它可以幫助...

Answer 2

就很快，我嘲笑的東西了，但它不是很好，可能需要做它的工作很多，但它是一個開始：

Codepen

HTML：

<div class="one"></div> 
<div class="two"></div> 
<button>Click</button> 

CSS：

html,body{ 
    margin:0; 
    width:100%; 
    height:100%; 
    overflow:hidden; 
} 
.one{ 
    position:relative; 
    background:red; 
    height:100px; 
    width:100%; 
} 
.two{ 
    position:relative; 
    top:-100px; 
    right:-100%; 
    background:blue; 
    height:100px; 
    width:100%; 
} 

的jQuery：

$('button').click(function(){ 
    $('.one').animate({'left':'-100%'}); 
    $('.two').animate({'right':'0'}); 
}); 

Answer 3

這似乎是工作（在Chrome中至少）：

DEMO

<div id="wrapper"> 
    <div id="page1" class="page"></div> 
    <div id="page2" class="page"></div> 
</div> 

---

#wrapper { 
    width: 100%; 
    height: 100%; 
    background: lightBlue; 
    overflow: hidden; 
} 

.page { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: orange; 
    transition: all 0.8s ease-out; 
} 

#page2 { 
    left: 100%; 
    background: lightGreen; 
} 

#wrapper.active #page1 { 
    left: -100%; 
} 

#wrapper.active #page2 { 
    left: 0; 
} 

---

切換 '有效' 狀態，你喜歡的任何方式：

$('#trigger').on('click', function() { 
    $('#wrapper').toggleClass('active'); 
});