建议旋转木马或相关的<div>点击和动画互动</div>

Question

昨天下午花了太多时间在网上搜索，并没有找到我认为我需要的内容，我想向社群寻求建议。我有一个特定的互动，我正在尝试原型，并猜测有一个插件，我可以使用而不是从头开始，但无法找到它。

交互是一个长的水平显示和幻灯片。该应用打开时可见一个div。用户向右滑动或点击，第一个div向左滑动（但不完全在屏幕外），第二个div都淡入并移动到第一个div所在的空间。对于尽可能多的窗格，交互仍在继续（对于这个原型，我们有五个级别的深度）。用户可以随意进入和退出 - 我计划通过单击可见div的左侧和右侧来显示这一点，因为设计显示了一个大的灰色条，每边都有一个箭头渐渐消失。向上移动'向上'是向下'向下' - div消失，前一个div滑入到位。

此演示/原型需要

。

根据要求，这是一个草图：

Answer 1

以为我会在原型上捅一下。尺寸很小，因为它在jsfiddle中，但您可以扩展结果窗口并根据需要更改尺寸。我只在Chrome中对此进行了测试，它使用了很多CSS3：

http://jsfiddle.net/TdAhm/4/

这是截图。为什么不？我认为它与草图很好地排列在一起。我有点困惑你是否真的想让前一个div被压扁而不是重叠。这似乎是不可取的，因为div中的内容会被破坏，但它是可行的。

Answer 2

这似乎是一个非常复杂的代码

看看链接.animate函数让它成为现实

很难想象你正在努力制作的东西......一旦你使用jquery获得femilair我相信你应该能够解决这个问题。

使用.animate，回调函数和.queue

我无法提供比第一个google结果更好找到的示例，因为它太复杂了

如果这对你没有帮助，你应该像Matt所说的那样，将其描绘出去并试着说清楚

Answer 3

很难给出答案，但据我所知，你可以看看

jQuery Tools Scrollable

与

互动

Nivo Slider

我正在开发类似的东西（可能）。看看this site（我还在开发中）。

希望这会对你有所帮助。