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

Question

我刚刚学习了一些 jQUery，以便在我为酒店创建的网站上建立一个基本的图片库，但目前还没有计划。我明白了，所以箭头会在图像中循环(还没有动画)，但我决定箭头应该在图像悬停时淡入，而不是淡出，但这不知何故弄乱了 CSS。

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

在 jQuery ready() 函数的开头。

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

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

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

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

知道为什么会这样吗？我是 jQuery 菜鸟。

这是页面的链接:BeanSheaf Hotel Temporary Space

谢谢你的时间，

英菲尼迪菲兹

Answer 1

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

The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page.
-- API Documentation