JQuery fadeIn（）将其他CSS元素移动到fadeIn（）

我刚刚学习了一些jQuery来获取基础图像库，该基础图像库位于我为酒店创建的网站上，但目前还没有计划。我已经掌握了它，所以箭头会循环显示图像（没有动画），但是我决定当图像悬停时淡入淡出，而不淡入淡出，但是这会让CSS变得混乱起来。在jQuery的准备的start（）函数$('.arrowRight').fadeOut(0);$('.arrowLeft').fadeOut(0);JQuery fadeIn（）将其他CSS元素移动到fadeIn（）

：

箭头开始通过调用淡出。

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

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

应该相对元素能够改变一个正常的元素的位置？

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

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

这里是一个网页的链接：BeanSheaf Hotel Temporary Space

感谢您的时间，

InfinitiFizz

来源

2010-05-11 Infiniti Fizz

你可能要检查出[jQuery的周期插件]（http://jquery.malsup.com/cycle /）。 – 2010-05-11 21:46:30

谢谢大家的意见和感谢，告诉我我需要学习多少:) 它现在使用的建议基本上每个人都说，使容器相对和箭头绝对。现在我只需要解决如何在使用replaceWith（）之后继承事件。谢谢大家。 – 2010-05-12 17:43:47

还有一个问题对不起，我现在更新了页面（更改了fund.css中的CSS和gallery.js中的一些jQuery，以便在库中的图像发生更改时委派事件）。悬停在完美的元素方面不会跳跃，但我现在的问题是，箭头将在hoverOut上方和下方的#imageContainer中淡出，但不会在其左侧或右侧淡出。此外，arrowRight的淡入和淡出似乎正在搞乱Internet Explorer的渲染，但是arrowLeft看起来很好，有什么想法？对不起，如果我应该问一个新的问题。谢谢 – 2010-05-12 18:07:14

#imageContainer应该有：position:relative

arrowLeft应该有：

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

相对定位元素占用空间布局。由于你的箭头相对定位，当它们出现时，它们会碰撞四周。

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

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

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

来源

2010-05-11 21:27:43

它看起来像图像周围的超级链接什么是推动一切正确的，当它消失请尝试将样式应用于该对象而不是图像本身。

如果你不使用它，我会建议获得萤火虫，使得确定事情发生的原因要容易得多。

编辑：其实它不仅仅是这样。相对于imageContainer投掷位置，并使超链接位置为绝对位置。

来源

2010-05-11 21:26:39 Bela

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

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

来源

2010-05-11 21:29:26 sepehr

你做的都是错误的家伙:)你需要这样做：

1）position:relative为#imageContainer

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

完成这一步之后，你不会有网页上有跳跃的东西任何问题:)

来源

2010-05-11 21:31:28

JQuery fadeIn（）将其他CSS元素移动到fadeIn（）

回答

相关问题