ansaurus

Question

JQuery fadeIn() moving other CSS elements on fadeIn()

Answer 1

+1 A:

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.

Bela 2010-05-11 21:26:39

Answer 2

+1 A:

#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:.

Diodeus 2010-05-11 21:27:43

Answer 3

+6 A:

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

Sepehr Lajevardi 2010-05-11 21:29:26

Answer 4

+1 A:

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 :)

Ionut Staicu 2010-05-11 21:31:28

ansaurus

tags:

views:

answers:

JQuery fadeIn() moving other CSS elements on fadeIn()

related questions