Question

我有多个带链接的容器，如下所示：

<div class="items" id="first"><a href="item1">item 1</a></div>

容器有背景图片，链接隐藏在：display: none;

$(".items").mouseover(function() {
    $("a", this).show(1500);
}).mouseout(function() {
    $("a", this).hide(1500);
});

现在问题是文本显示缓慢，但占据的位置是立即采取的。如何实现对立面 - 立即可见的文字及其占据的位置要慢慢显示？

Answer 1

您可能还想显示：阻止以确保文本不会换行。

Answer 2

隐藏<a>时，屏幕上不会占用任何空间。一旦他们变得不被隐藏，他们就会突然占用空间。这就是为什么，在你的现场例子中，你会立即看到那个空间开放。

文本从占用零空间变为占据了它的全部空间。它不是立即可见的，因为不透明度从零开始，并且仅在1500毫秒后达到完全不透明度。即使在不透明度为0时，它仍然存在，占用空间。

所以你问的是不可能的。你可以让你的<a>绝对定位，所以他们永远不会占用空间，然后在它们完全消失之后，你的图形之间的空间会扩大，但我不确定这是你想要的......

Answer 3

哦，很奇怪，我在JQuery 1.4.4中尝试过它并且它可以正常工作，但正如你的jsfiddle中所示，它在1.6.3中打破了。

无论如何，我猜这是因为a代码默认的display样式为inline，不允许您指定宽度。

您可以强制它为.items a { display:inline-block; }，然后使用JQuery隐藏它们：

$(".items a").hide();