要使用什么，MooTools变形，jQuery动画，jq hover()还是其他什么？

Question

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

我可以使用jq或moo库。

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

你可以在扩展滑块导航上看到延迟(从侧面弹出)和它的信息(从底部弹出)

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

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

我的问题是，无论是使用moo morph，还是jq animate，我都必须列出容器中的每个div，因为它们将具有不同的绝对位置。

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

任何帮助我们都将不胜感激

Answer 1

我完全没有使用mootools的经验，但我知道jquery。这是一个非常简单的模拟效果。(不过，我的设计主要是基于谷歌的商店)。

Rollover Hovering Replacement Example @ jsFiddle

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

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

正如你所看到的，它也可以在多个控件上工作。

谷歌编辑：我还添加了一个如何让主要内容滑走的示例(如)。

Answer 2

这里是使用CSS3转换的另一种选择。

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

在较老的浏览器中不能工作。但是它向您展示了，您完全可以在不使用javascript或jQuery的情况下实现这一点。