创建成长和轻推效果

Question

我不确定这个问题是否合适，它有点灰色。

我想创建一个类似于in this example profile

中的效果

现在我需要一点帮助，我知道所有的div都在一个固定宽度的容器中，但当你将它们悬停在它们上面时，它们会从主容器div中生长出来。我注意到它们是位置相对的这解释了如何维护文档的流程以及div可以从容器中分离出来......当它们向左浮动时。

我将使用.animate来增长div，并使用.fade来淡出其他div（$（'。box。）。不是（this）..等等。

我今天晚些时候会提供一个代码示例。

我想知道是否有人知道其他div如何被推到一边或者这样做的好方法

Answer 1

使用CSS和javascript。在其中一个div元素的悬停时，其他元素被赋予一个类向下滑动/向上滑动/向右滑动/向左滑动，这取决于相对于鼠标悬停div元素的其他div元素位置。例如，当课程滑下时：

.slide-down .animate {
top: 10px;
}

为了实现淡入淡出，正在使用这个css：

.slide-down .animate, .slide-up .animate, .slide-right .animate, .slide-left .animate {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
opacity: 0.4;
}

我找不到使类更改的javascript，但使用javascript或jQuery重新创建应该非常简单。

Answer 2

http://jsfiddle.net/d8BuH/

非常简单的例子。我使用了边距和浮点数而不是基于类的方法。这个你不会有很多控制但是代码更简单。因此，如果您正在寻找一个很酷的简单效果，这可能适合您。