jquery - 创建增长和微移效果

Question

我不确定这个问题是否可以，它有点灰色地带。

我想创建一种类似于 in this example profile 中看到的效果

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

我将使用 .animate 来增大 div，并使用 .fadeTo 淡出其他 div($('.box.).not(this).. 等)

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

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

Answer 1

使用 CSS 和 JavaScript。悬停其中一个 div 元素时，根据其他 div 元素相对于鼠标悬停的 div 元素的位置，为其他元素赋予类 Slide-down/slide-up/slide-right/slide-left。例如，当给定类(class)幻灯片时:

.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 重新创建应该非常简单。