幻灯片内容/页面转换

我正在尝试重新创建他们已经在gimmebar.com上结束的东西 。

单击图像时，内容当前页面向左滑出并淡出。 目标页面淡入并从右侧滑入。

我尝试了几件事，比如在宽度为200％的容器中创建两个div并滚动内容以查看和使用JqueryUI并滑动div。 滚动失败，div完全没有移动，srollLeft总是0，无论如何。 幻灯片的效果稍好一些，但对我来说似乎并不是同时运行。 第二个div只是弹出存在而不是在第一个后面很好地滑动。

       .container { width: 100%; float: left; height: 800px; } #one { background-color: red; } #two { background-color: #333; display: none; }      
 
  $( document ).click(function() { $("#one").hide("slide", { direction: "left" }, 1000); $("#two").show("slide", { direction: "left" }, 1000); });    

它似乎应该如此容易实现，但我被卡住了。

照顾自己。

编辑：我有点工作，你可以在这个小提琴中看到。 幻灯片在那里，但我看不到褪色。 也可能有更好的方法来实现这一点，但我非常满意不必加载第三个lib /插件来滑动div。

http://webadvent.org/2012/css-sliding-panels-by-bedrich-rios找到他们的开发人员编写的教程。 认为这将算作解决方案。

Answer 1

一个纯粹的JavaScript解决方案：在CSS中：

 div.wrap {visibility: hidden; position: absolute; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%} div.wrap div.newContent {visibility: visible; position: relative; left: 100%;} 

在HTML中：

 
 This is the content that is initially displayed 
 
 
 Put the content you want to be revealed here 
  

newContent div最初是隐藏的，因为它的左边缘位于其父（wrap）div的右边缘，CSS告诉浏览器隐藏溢出父div的任何内容。

然后显示隐藏的内容设置一个计时器，逐步将内部div的style.left从100％减少到0％，并将不透明度从0增加到1.我创建了一个类，用于打开/关闭可轻微调整的swipey菜单去做这个。 （编辑： 较新版本 ）

Answer 2

我建议你使用我不久前在一个网站上使用的这个jQuery脚本，它就像一个名为CODA SLIDER的魅力，它是由Kevin Batdorf制作的，它的安装只有5行代码。

祝好运