jQuery 1.6.3 显示和隐藏之间的动画差异
我有多个带有链接的容器，如下所示：
<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);
});
现在的问题是文本显示缓慢，但所占据的位置立即被占据。如何实现相反的效果——文本立即可见，而其占据的位置缓慢显示？
I have multiple containers with links, like this:
<div class="items" id="first"><a href="item1">item 1</a></div>
The containers have a background image and the links are hidden with: display: none;
$(".items").mouseover(function() {
$("a", this).show(1500);
}).mouseout(function() {
$("a", this).hide(1500);
});
Now the problem is that the text is showing slow, but the place which occupies is taken immedeiatly. How to achieve the oposite - the text to be visible immediately and its place which it occupies to be shown slowly?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
http://jsfiddle.net/wtZPQ/2/
您可能还需要显示：阻止以确保文本不换行。
http://jsfiddle.net/wtZPQ/2/
you may also want to display:block to makesure the text doesnt wrap.
当您的
隐藏时，它们不会占用屏幕上的空间。一旦它们不再隐藏，它们就会突然占据空间。这就是为什么在您的实例中，将鼠标悬停时您会立即看到该空间打开。文本已从占据零空间变为占据全部空间。它不会立即可见，因为不透明度从零开始，仅在 1500 毫秒后达到完全不透明度。但即使不透明度为零，它现在仍然存在，占据空间。
所以你问的实际上是不可能的。您可以使您的
绝对定位，这样它们就不会占用空间，然后在它们完全淡入后使图形之间的空间扩大，但我不确定这就是您想要的去....When your
<a>are hidden, they take up no space on the screen. As soon as they become un-hidden, they suddenly take up space. That is why, in your live example, on hover you immediately see that space open up.The text has gone from taking up zero space to taking up it's full space. It's not immediately visible because the opacity starts at zero, and only reaches full opacity after 1500 milliseconds. Even at opacity zero, though, it still now exists, taking up space.
So what you're asking isn't really possible. You COULD make your
<a>absolutely positioned, so they never take up space, then after they fade in completely make the space between your graphics expand, but I'm not sure that's what you're going for....哦，奇怪的是，我在 JQuery 1.4.4 中尝试过，它工作正常，但如 jsfiddle 所示，它在 1.6.3 中中断。
无论如何，我猜测这是因为
a标签默认具有inline的display样式，它不允许您分配宽度。您可以强制它为
.items a { display:inline-block; }然后使用 JQuery 隐藏它们：http://jsfiddle.net/wtZPQ/3/
Oh weird, I tried it in JQuery 1.4.4 and it works correctly, but as shown in your jsfiddle it breaks in 1.6.3.
Anyway, i guessed that it was because an
atag default has adisplaystyle ofinlinewhich doesn't let you assign width.You can force it to be
.items a { display:inline-block; }and then hide them using JQuery:http://jsfiddle.net/wtZPQ/3/