javascript - 如何在不影响页面布局的情况下使用 jQuery 扩展框大小

Question

我想运行一个 jquery 来扩展一个框(div)而不影响页面布局。这是一个示例 http://themes.ddwebstudios.net/?theme=photon&type=html

如您所见，如果将鼠标悬停在图像下方的小透明框上(横跨页面)，该框将向上滑动，而不会更改页面大小。

我知道如何使用 .hide() 和 .show() 或 slidedown 和 slideup 函数与 display:hidden;框格式，但如您所知，这里存在一些问题，因为我希望显示一部分框，而且我不想对页面布局进行任何更改

这是我试图弄清楚如何做的示例，您能否看一下并告诉我如何在 row_3 之前添加一部分 magicDiv 框(顶部的 5%)并扩展在不影响(取消)页面布局的情况下使用 jquery 函数将其调整为全尺寸？

http://jsfiddle.net/Behseini/nuC69/2/

提前感谢您抽出时间。

Answer 1

盒子不会改变页面大小，因为它们使用绝对定位和 z-index。

如果您在 album-thumbs div 打开时右键单击它来检查它，您会看到它是用 CSS 完成的:

关键要素是:

position: absolute;
z-index: 10;

此外，这不是您问题的一部分，您可以使用 display: none; 来避免影响页面布局或使用 visibility: hidden; 仍然有div 影响页面布局。 (display: hidden;，如您所写，不是有效的 CSS)