JQuery fadeIn()移动fadeIn上的其他CSS元素()
我刚刚学习了一些jQUery，以便在我为一家酒店创建的网站上建立一个基本的图片库，但目前还没有计划。我得到了它，所以箭头将循环通过图像(还没有动画)，但我决定箭头应该在图像悬停时淡入，当不在时淡出，但这以某种方式扰乱了CSS。
箭头通过调用：$('.arrowRight').fadeOut(0);$('.arrowLeft').fadeOut(0);开始淡出
在jQuery ready()函数的开头。
这很好，但当你将鼠标悬停在图像上时，箭头会逐渐淡入，图像会向右移动，我不知道为什么。我想这可能是因为左箭头现在淡入意味着它被它推倒了，但箭头有以下css：
position:relative;
top: -90px;
left: 25px;相对元素应该能够改变正常元素的位置吗？
如果你需要尝试，只需将鼠标悬停在大图像(占位符)上，它们将在箭头淡入时跳过，并在箭头淡出时跳回。
你知道为什么会发生这种情况吗？我是jQuery的菜鸟。
以下是该页面的链接：BeanSheaf Hotel Temporary Space
耽误您时间，实在对不起,
InfinitiFizz
回答 4
Stack Overflow用户
发布于 2010-05-12 05:27:43
#imageContainer应该有：position:relative
arrowLeft应该具有：
position:absolute;
top:90px;
left:5px;相对定位的元素会占用布局中的空间。因为你的箭头是相对定位的，所以当它们出现时，它们会撞到周围的东西。
为了定位东西，这样就不会发生这种情况，图像的“顶部”项目需要绝对定位。这意味着它们不再是布局流的一部分，而是位于布局流的“顶部”。
绝对定位的项目需要原点(0,0)的参考点。这些项查看它们的包装器并沿HTML树向上移动，直到它们找到第一个相对定位的元素来确定它们的原点。如果没有，它将使用<body>作为参考点。
因为我们将position:relative添加到imageContainer中，所以容器现在成为参考点，允许您使用top:和left:精确定位箭头。
Stack Overflow用户
发布于 2010-05-12 05:29:27
因为fadeOut()方法将none赋值给元素的display属性。
尝试将目标元素的position更改为由relative定位的元素包装的absolute。
.fadeOut()方法对匹配元素的不透明度进行动画处理。一旦不透明度达到0，则“显示样式”属性将设置为“无”，因此该元素不再影响页面布局。
--
Stack Overflow用户
发布于 2010-05-12 05:26:39
看起来图片周围的超链接就是当它淡入时把所有东西都推到右边的东西。尝试将样式应用于此，而不是图像本身。
如果你还没有使用过firebug，我建议你使用firebug，这样可以更容易地确定为什么会发生一些事情。
编辑:实际上，它不仅仅是这样。在imageContainer上抛出相对位置，并将超链接位置设为绝对位置。
https://stackoverflow.com/questions/2814534
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号