javascript - 图像向右滑动以覆盖文本，然后在向后滑动时显示新文本

Question

我有一个我想要达到的效果，但我无法准确地思考如何实现它。以下是一些显示我想要实现的效果进展的图像：http: //imgur.com/a/In6IK

所以本质上，我有多张幻灯片，其中包含我想一张一张地自动显示的文本。为了隐藏当前幻灯片并显示下一张，我希望图像（位于文本左侧）向右滑动，在文本移动时覆盖/隐藏文本，然后当它滑回其原始位置，显示下一张幻灯片的文本。

那么我将如何实现这种效果呢？

Answer 1

这是一个原始的想法。也许您可以使用:after并:before定位它们，以便它们隐藏文本，使其消失。

HTML 将类似于：

<div class="main">
  <div class="over"></div>
  <div class="text">This is some text</div>
</div>

而对于 CSS 看看这个小提琴http://jsfiddle.net/Zs2MU/

也许它会在你的情况下帮助你。

UPD这是支持多行文本的更新解决方案http://jsfiddle.net/Zs2MU/2/