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