JQuery fadeIn() 在 fadeIn() 上移动其他 CSS 元素答案

【问题标题】：JQuery fadeIn() moving other CSS elements on fadeIn()JQuery fadeIn() 在 fadeIn() 上移动其他 CSS 元素
【发布时间】：2013-06-11 02:49:07
【问题描述】：

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

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

在 jQuery 的 ready() 函数开始处。

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

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

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

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

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

感谢您的宝贵时间，

英菲尼迪菲兹

【问题讨论】：

您可能想查看jQuery Cycle Plugin。
感谢大家的 cmets 并感谢您向我展示了我需要学习的知识 :) 它现在正在使用基本上每个人都说的关于使容器相对和箭头绝对的建议。现在我只需要弄清楚在使用 replaceWith() 之后如何继承事件。谢谢大家。
还有一个问题，抱歉，我现在更新了页面（更改了 fund.css 中的 CSS 和 gallery.js 中的一些 jQuery，以便在更改图库中的图像时委托事件）。就元素不跳动而言，悬停效果很好，但我现在的问题是箭头会在 #imageContainer 上方和下方的 hoverOut 上淡出，但不会在它的左侧或右侧。此外，arrowRight 的淡入和淡出似乎扰乱了 Internet Explorer 的渲染，但 arrowLeft 看起来不错，有什么想法吗？抱歉，如果我应该在一个新问题中问这个问题。谢谢
这不会干扰居中页面... .. 因为当您调整浏览器窗口大小时，绝对定位的 div 会根据窗口大小向左或向右移动 .. ？跨度>
您是在回答最初的问题吗？如果你是，请进一步澄清你的答案。如果没有，您应该发表评论。

【解决方案1】：

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

.fadeOut() 方法为匹配元素的不透明度设置动画。一旦不透明度达到 0，显示样式属性设置为无，因此该元素不再影响页面的布局。
-- API Documentation

【讨论】：

【解决方案2】：

#imageContainer 应该有：position:relative

arrowLeft 应该有：

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

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

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

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

你做错了，伙计：）你需要这样做：

1) position:relative 为 #imageContainer

2) position:absolute 为arrorLeft 和arrowRight 父母（链接），并尝试与left 和top 一起玩。

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

【讨论】：