JQuery fadeIn() 在 fadeIn() 上移动其他 CSS 元素
我刚刚学习了一些 jQUery，以便在我为一家酒店创建的网站上建立一个基本的图片库，但目前还没有计划。我已经明白了，所以箭头将在图像中循环（还没有动画），但我决定当图像悬停在上面时箭头应该淡入，而不是淡出，但这会以某种方式弄乱 CSS。
开始处调用： $('.arrowRight').fadeOut(0);$('.arrowLeft').fadeOut(0); 箭头开始淡出
通过在 jQuery Ready() 功能。
这很好，但是当您将鼠标悬停在图像上并且箭头淡入时，图像向右移动，我不知道为什么。我想这可能是因为左箭头现在淡入意味着它被它推倒了，但箭头具有以下 css：
position:relative;
top: -90px;
left: 25px;
相对元素应该能够改变普通元素的位置吗？
如果您需要尝试一下，只需将鼠标悬停在大（占位符）图像上，当箭头淡入时，它们的图像就会跳过去，当箭头淡出时，它们就会跳回来。
有什么想法为什么会发生这种情况吗？我是一个 jQuery 菜鸟。
以下是该页面的链接：BeanSheaf 酒店临时空间
感谢您抽出时间，
InfinitiFizz
I've just been learning some jQUery to get a basic image gallery going on a website I'm creating for a hotel but it's currently not going to plan. I've got it so the arrows will cycle through images (no animation yet) but I decided that the arrows should fade in when the image is hovered over and fade out when not but this is messing up the CSS somehow.
The arrows start faded out by calling: $('.arrowRight').fadeOut(0);$('.arrowLeft').fadeOut(0);
at the start of the jQuery ready() function.
This is fine, but when you hover over the image and the arrows fade in, the image shifts to the right and I don't know why. I suppose it could be because the left arrow now fading in means it is getting pushed over by it but the arrow has the following css:
position:relative;
top: -90px;
left: 25px;
Should a relative element be able to alter a normal element's position?
If you need to try it out, just hover over the large (placeholder) image and they image will jump across when the arrows fade in and jump back when they fade out.
Any ideas why this is happening? I'm a jQuery noob.
Here is a link to the page: BeanSheaf Hotel Temporary Space
Thanks for your time,
InfinitiFizz
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
因为
fadeOut()方法分配了none到元素的display属性。尝试将目标元素的
position更改为由relative定位元素包裹的absolute。Because the
fadeOut()method assignsnoneto thedisplayproperty of the element.try to change the target element's
positiontoabsolutewrapped by arelativepositioned element.#imageContainer应具有：position:relativearrowLeft应具有：相对定位的元素占用布局中的空间。由于你的箭头是相对定位的，所以当它们出现时，它们会撞到周围的东西。
为了防止这种情况发生，图像“顶部”的项目需要绝对定位。这意味着它们不再是布局流程的一部分，而是位于布局的“之上”。
绝对定位的项目需要一个原点 (0,0) 的参考点。这些项目查看其包装并沿 HTML 树向上查找，直到找到第一个相对定位的元素来确定其原点。如果没有，它将使用
作为参考点。由于我们将
position:relative添加到imageContainer，容器现在成为参考点，允许您使用top:准确定位箭头和左：。#imageContainershould have:position:relativearrowLeftshould have:Relatively-positioned elements take up space in your layout. Since your arrows were relatively positioned they bump things around when they appear.
In order to position things so this doesn't happen, the items "on top" of the image need to be positioned absolutely. This means they are no longer part of the flow of the layout but are "on top" of it.
Absolutely-positioned items need a point of reference for the point of origin (0,0). These items look at their wrapper and go up the HTML tree until they find the first relatively-positioned element to determine their origin point. If there is none, it uses the
<body>as the point of reference.Because we are adding
position:relativetoimageContainer, the container now becomes the point of reference, allowing you to accurately position your arrows usingtop:andleft:.看起来图像周围的超链接是在淡入时将所有内容推向右侧的原因。尝试将样式应用于该图像而不是图像本身。
如果您还没有使用 firebug，我建议您使用它，这样可以更轻松地确定发生某些事情的原因。
编辑：
事实上，事情还不止于此。在 imageContainer 上抛出相对位置，并使超链接位置绝对。
It looks like the hyperlink surrounding the image is what is pushing everything to the right when it fades in. Try applying the styles to that instead of the image itself.
I'd suggest getting firebug if you don't use it already, makes determining why something is happening much easier.
Edit:
Actually it's more than just that. Throw position relative on imageContainer, and make the hyperlink position absolute.
你做错了，伙计:)你需要这样做：
1)
position:relativefor#imageContainer2)
position:absoluteforarrorLeft和arrowRight父级（链接也是如此），并尝试使用left和top来使用它们。执行此操作后，在页面上跳转内容就不会有任何问题了:)
You doing all wrong dude :) You need to do this:
1)
position:relativefor#imageContainer2)
position:absoluteforarrorLeftandarrowRightparents (so for links) and try to play with them withleftandtop.After you do this, you won't have any problem with jumping stuff on page :)