我正在尝试重新创建就像他们在 gimmebar.com 上克服的那样 https://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides.
单击图像时，当前页面的内容向左滑出并淡出。目标页面淡入并从右侧滑入。
我尝试了一些方法，例如在宽度为 200% 的容器中创建两个 div 并滚动内容以查看并使用 JqueryUI 并滑动 div。
滚动失败，div 根本不移动，并且无论如何 srollLeft 始终为 0。
幻灯片效果更好一些，但对我来说，它们似乎不是同时运行的。
第二个 div 只是突然出现，而不是很好地滑入第一个 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>
看起来应该很容易实现，但我被困住了。
小心。
编辑：
我有点让它工作，正如你所看到的这把小提琴 http://jsfiddle.net/SdxnQ/。
幻灯片就在那里，但我看不到有褪色。
可能还有更好的方法来实现这一点，但我很满意不必加载第三个库/插件来滑动 div。
http://webadvent.org/2012/css-sliding-panels-by-bedrich-rios http://webadvent.org/2012/css-sliding-panels-by-bedrich-rios找到了他们的开发人员编写的教程。认为这可以算是解决方案。
纯 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 最初是隐藏的，因为它的左边缘位于其父级（换行）div 的右边缘，并且 CSS 告诉浏览器隐藏溢出父级 div 的任何内容。
然后为了显示隐藏的内容，设置一个计时器，逐渐减少style.left对于内部 div 从 100% 到 0% 并将不透明度从 0 增加到 1。我做了一个用于打开/关闭滑动菜单的类 http://pastebin.com/teFi3tXz可以稍微调整一下来做到这一点。 （编辑 ：较新的版本 http://jsfiddle.net/ts2tT/2/)
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
