JQuery fadeIn () moves other CSS elements to fadeIn ()
I just did some jQuery to get a basic gallery of images in a website I'm building for a hotel, but it's not going to be scheduled at this time. I have it so that the arrows will cycle through the images (no animation yet), but I figured the arrows should disappear when the image hovers and disappear when not, but that somehow messed up the CSS.
The arrows begin to disappear causing: $('.arrowRight').fadeOut(0);$('.arrowLeft').fadeOut(0);
at the beginning of the jQuery ready () function.
That's fine, but when you hover over the image and the arrows disappear, the image shifts to the right, and I don't know why. I suppose it might be because the left arrow now disappears means that it is clicked on it, but the arrow has the following css:
position:relative;
top: -90px;
left: 25px;
Should a relative element change the element's normal position?
If you have to try, just hover your mouse over the large (fill) image and the image will jump when the arrows disappear and bounce when they disappear.
Any ideas why this is happening? I am a jQuery noob.
Here is the link to the page: BeanSheaf Hotel Temporary Space
Thank you for your time,
InfinitiFizz
a source to share
#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 have been relatively positioned, they bump around when they appear.
To arrange things so that this does not happen, the elements "on top" of the image must be absolutely positioned. This means that they are no longer part of the layout flow, but are "on top".
Absolutely positioned elements need a reference point for the origin (0,0). These elements look at their wrapper and climb up the HTML tree until they find the first relatively positioned element to determine their starting point. If it is not there, it uses it <body>
as a reference point.
As we add position:relative
in imageContainer
, the container now becomes a reference point, allowing you to accurately position your arrows with top:
and left:
.
a source to share
Because the method fadeOut()
assigns to the none
property of the display
element.
try changing the target element position
to absolute
wrapped by a positioned element relative
.
The method
.fadeOut()
animates the opacity of matched elements. When the opacity reaches 0, the display style property is set to none, so the element no longer affects the page layout.
- API documentation
a source to share
It looks like the hyperlink surrounding the image is what pushes everything to the right when it disappears. Try applying styles to this instead of the image itself.
I would suggest getting firebug if you are not already using it, identifies why something is much easier.
Edit: It's actually more than just that. Note the position of the position on the imageContainer object and make the position of the hyperlink absolute.
a source to share
You are doing everything 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 that you will have no problem navigating to the page :)
a source to share