jquery从右边滑入div，然后从屏幕左边滑出旧的div

Question

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

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

我想复制一些应用程序中使用的 Action 。即 #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

希望对你有帮助