Question

我有2个包含2个屏幕信息的div。

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

我想要复制某些应用中使用的动作。即＃div1显示在屏幕上，但是当点击一个按钮时#div2从右边滑入，而＃div1向左滑动。＃div2上的一个按钮可以反转布局。

我不是一个css或jquery家伙，但我很确定这是可以实现的，并且在我的能力范围内提出一些建议。这甚至可以用纯CSS完成。

有人可以帮忙吗？

Answer 1

很快，我嘲笑了一些东西，但它不是很好，可能需要做很多工作，但这是一个开始：

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 2

这似乎有效（至少在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'); 
});

Answer 3

你可以像这样使用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

希望它有所帮助...

Jquery从右边滑入div，并滑出屏幕左边的旧div

3 个答案: