0

我在一个容器中有一组元素，它们在页面加载时都隐藏了。它们被我想动画悬停的负绝对位置隐藏。

我可以使用库 jq 或 moo

并试图在悬停效果上获得类似效果的网店 https://chrome.google.com/webstore/category/home?utm_source=chrome-ntp-icon

您可以看到扩展滑块导航的延迟（从侧面弹出）及其信息（从底部弹出）

这是非常简单的 moo 版本，没有延迟

http://jsfiddle.net/BVjna/38/

通过使用 moo morph 或 jq animate 我遇到的问题是我必须列出容器内的每个 div，因为它们将具有不同的绝对位置。

我宁愿拥有一个应用于 .container 的类，并通过 css 对内部元素进行变形/动画处理，有点像 .container.hovered .el1{top:0;}但当然还有动画效果。

任何帮助表示赞赏

4

2 回答 2

1

我对 mootools 的经验绝对是 0，但我确实知道 jquery。这是一个非常简单的模仿效果。（虽然，我主要是基于谷歌的商店）。

Rollover 悬停替换示例 @ jsFiddle

这里的想法是不必计算正在滑过的 div 并处理它们的绝对位置，而是将它们放入单个容器中并展开。

这也解决了您将所有元素的起始位置对齐在同一点的问题，因此示例中的相对速度会产生手风琴效果（看起来像拉伸而不是滑动）。

如您所见，它也适用于多个控件。

编辑：我还添加了一个如何使主要内容滑开的示例（如谷歌）。

于 2012-08-18T00:26:34.517 回答
-1

这是使用 CSS3 过渡的另一个选项。

http://jsfiddle.net/davesters81/VMxyw/2/

但在旧浏览器中不起作用。但向您展示了您完全可以在没有 javascript 或 jQuery 的情况下实现这一目标。

于 2012-08-18T01:13:22.583 回答