一种让页面从任何方向滑入和滑出的方法答案

【问题标题】：A way to let pages slide in and out from any direction一种让页面从任何方向滑入和滑出的方法
【发布时间】：2013-07-27 17:14:48
【问题描述】：

我的页面由分布在整个网站上的不同 div 标签组成（高度和宽度 = 100%）

其中一个是一次可见的，它们应该在操作时相互替换（单击按钮左右）。

我正在寻找可以让我滑出并同时滑入另一个div 的脚本或插件。

即div1 存在，我单击一个按钮，现在 div1 向左滑出，同时 div2 从右侧滑入。

我尝试了几件事，包括 jQuery 的动画、slideToggle、Toggle..

【问题讨论】：

它没有用？代码是什么样的？
究竟是什么？代码非常复杂——我现在正在尝试构建一个演示
一个想法是你有divs。在单击时，您将调用一个 jQuery 动画函数，该函数将 divs 向同一方向滑动。（divs 必须彼此相邻。）
可以帮助malsup.com/jquery/cycle

标签： javascript jquery html css

【解决方案1】：

查看此演示，看看它是否可以在没有 JavaScript 的情况下解决您的问题：http://www.designmadeingermany.de/slideshow/

/* The Basic Style for all Pages */

.page { 
position: absolute; 
width: 100%; 
height: 100%; 
}



/* The Pages */

#i1 { left: 0%; background-color: #fff; }
#i1 { left: 100%; background-color: #fff; }
#i2 { left: 200%; background-color: #bbb; }
#i3 { left: 300%; background-color: #777; }



/* The Transition Effect */

.page { 
-webkit-transition: -webkit-transform 0.8s;
-moz-transition: -moz-transform 0.8s;
-o-transition: -o-transform 0.8s;
transition: transform 0.8s;
}



/* The Sliding Action */
/* TranslateX for better Performance. Translate3D for better Performance on Ipad. */

#a1:target .page { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); }
#a2:target .page { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); -o-transform: translateX(-200%); transform: translateX(-200%); }
#a3:target .page { -webkit-transform: translateX(-300%); -moz-transform: translateX(-300%); -o-transform: translateX(-300%); transform: translateX(-300%); }



/* The First Page - Initial Positioning without Anchor */

.page { 
-webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%);
}

【讨论】：