JQuery fadeIn() moving other CSS elements on fadeIn()
- by Infiniti Fizz
Hi,
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
