2

我刚刚学习了一些 jQUery，以便在我为酒店创建的网站上获得一个基本的图片库，但目前还没有计划。我已经得到它，所以箭头将在图像中循环（还没有动画），但我决定当图像悬停时箭头应该淡入，而不是淡出，但这会以某种方式弄乱 CSS。

箭头通过调用开始淡出：$('.arrowRight').fadeOut(0);$('.arrowLeft').fadeOut(0);

在 jQuery ready() 函数的开头。

这很好，但是当您将鼠标悬停在图像上并且箭头淡入时，图像会向右移动，我不知道为什么。我想这可能是因为左箭头现在淡入意味着它被它推倒了，但箭头具有以下 css：

position:relative;
top: -90px;
left: 25px;

相对元素是否应该能够改变普通元素的位置？

如果您需要尝试一下，只需将鼠标悬停在大（占位符）图像上，当箭头淡入时它们的图像会跳过，当它们淡出时会跳回来。

任何想法为什么会发生这种情况？我是一个 jQuery 菜鸟。

这是该页面的链接：BeanSheaf Hotel Temporary Space

谢谢你的时间，

英菲尼迪菲兹

4

4 回答 4

2

因为该fadeOut()方法分配none给display元素的属性。
尝试将目标元素更改position为由定位元素absolute包裹relative。

该.fadeOut()方法对匹配元素的不透明度进行动画处理。一旦 opacity 达到 0，display style 属性就设置为 none，因此元素不再影响页面的布局。
-- API 文档

于 2010-05-11T21:29:26.927 回答
1

看起来图像周围的超链接是在它淡入时将所有内容推向右侧的原因。尝试将样式应用于该图像而不是图像本身。

如果您还没有使用它，我建议您使用 firebug，这样可以更轻松地确定某些事情发生的原因。

编辑：其实不止如此。在 imageContainer 上抛出相对位置，并使超链接位置成为绝对位置。

于 2010-05-11T21:26:39.460 回答
1

#imageContainer应该有：position:relative

arrowLeft应该有：

position:absolute;
top:90px;
left:5px;

相对定位的元素会占用布局中的空间。由于您的箭头相对定位，因此它们在出现时会撞到周围。

为了定位事物以免发生这种情况，图像“顶部”的项目需要绝对定位。这意味着它们不再是布局流程的一部分，而是“在上面”。

绝对定位的项目需要一个参考点作为原点 (0,0)。这些项目查看它们的包装器并沿着 HTML 树向上，直到它们找到第一个相对定位的元素来确定它们的原点。如果没有，它会使用<body>作为参考点。

因为我们正在添加position:relative，imageContainer所以容器现在成为参考点，允许您使用top:和准确定位箭头left:。

于 2010-05-11T21:27:43.267 回答
1

你做错了伙计:)你需要这样做：

1)position:relative对于#imageContainer

2) position:absolutefor arrorLeftand parents (so for links) 并尝试用and 和arrowRight他们一起玩。lefttop

完成此操作后，在页面上跳转内容不会有任何问题:)

于 2010-05-11T21:31:28.640 回答