Question

我正在尝试重新创建something like they've got over at gimmebar.com。

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

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>slide demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
    <style>
    .container {
        width: 100%;
        float: left;
        height: 800px;
    }
    #one {
        background-color: red;
    }
    #two {
        background-color: #333;
        display: none;
    }
    </style>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
    <div class="container" id="one"></div>
    <div class="container" id="two"></div>
<script>
$( document ).click(function() {
          $("#one").hide("slide", { direction: "left" }, 1000);
          $("#two").show("slide", { direction: "left" }, 1000);
});
</script>
</body>
</html>

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

小心。

编辑：正如你在this fiddle中看到的那样，我有点工作了。幻灯片在那里，但我看不到褪色。也可能有更好的方法来实现这一点，但我非常满意不必加载第三个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中的

：

<div class="initContent">
    This is the content that is initially displayed
</div>
<div class="wrap">
    <div class="newContent">
        Put the content you want to be revealed here
    </div>
</div>

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

然后显示隐藏内容设置一个计时器，逐步将内部div的style.left从100％减少到0％，并将不透明度从0增加到1.我创建了class for opening/closing swipey menus可以稍微适应这样做。（编辑：a newer version）

Answer 2

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

祝你好运

幻灯片内容/页面转换

2 个答案: