Question

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

通过调用$('.arrowRight').fadeOut(0);$('.arrowLeft').fadeOut(0);

，箭头开始淡出

在jQuery ready（）函数的开头。

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

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

相对元素是否能够改变正常元素的位置？

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

为什么会发生这种情况？我是一个jQuery noob。

感谢您的时间，

InfinitiFizz

Answer 1

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

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

Answer 2

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

如果您不使用它，我建议使用萤火虫，确定更容易发生的事情。

编辑：实际上它不仅仅是那个。在imageContainer上抛出相对位置，并使超链接位置绝对。

Answer 3

#imageContainer应该有：position:relative

arrowLeft应该：

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

相对定位的元素占用了布局中的空间。由于你的箭头相对定位，它们会在它们出现时碰到它们。

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

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

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

Answer 4

你做错了老兄:)你需要这样做：

1）position:relative #imageContainer

2）position:absolute用于arrorLeft和arrowRight个父母（对于链接），并尝试使用left和top进行播放。

执行此操作后，您在页面上跳转内容时不会遇到任何问题：）