JQuery fadeIn() moving other CSS elements on fadeIn()
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 wh开发者_StackOverflow中文版en 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
Because the fadeOut() method assigns none to the display property of the element.
try to change the target element's position to absolute wrapped by a relative positioned element.
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
#imageContainer should have: position:relative
arrowLeft should have:
position:absolute;
top:90px;
left:5px;
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:relative to imageContainer, the container now becomes the point of reference, allowing you to accurately position your arrows using top: and left:.
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.
You doing all wrong dude :) You need to do this:
1) position:relative for #imageContainer
2) position:absolute for arrorLeft and arrowRight parents (so for links) and try to play with them with left and top.
After you do this, you won't have any problem with jumping stuff on page :)
加载中,请稍侯......
精彩评论