tags:

views:

5014

answers:

7

I'm using the jQuery slideToggle function on a site to reveal 'more information' about something. When I trigger the slide, the content is gradually revealed, but is located to the right by about 100 pixels until the end of the animation when it suddenly jumps to the correct position. Going the other way, the content jumps right by the same amount just before it starts its 'hide' animation, then is gradually hidden.

Occurs on IE7/8, FF, Chrome.

Any ideas on how I would fix this?

Thanks in advance.

+4  A: 

This is just a shot in the dark, but if the function is manipulating the height css property of your element(s), according to this site you have to separate the padding and display:none in your css to keep it from jumping

CarolinaJay65
+1  A: 

Try messing with how the element is positioned/displayed/floated. I've had similar problems which were solved by playing with those settings.

Ben
+1  A: 

I have found a workaround, but I'm still not sure of the details. It seemed that when the 'overflow: hidden' style was added by jQuery, the effect that a nearby floated element had changed. The workaround was to place a permanent 'overflow: hidden' on the slideToggle'd div, and also a negative margin-left to counterbalance the effect.

I am surprised that changing the overflow value has such an effect on layout, but there you have it...

Darren Oster
+1  A: 

Does your document contains any DOCTYPE declaration? Without it, some browser render the page in "quirck" mode which doesn't always lead to the result you are expecting..

see here

To make sure your page render as intended, add the following declaration to the top of the page (that is, before the html tag).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
matdumsa
Doctype fixed it on IE8 for me, thanks. Daily vote limit reached. Sorry.
Andrew
A: 

I have specified xhtml-transitional ()

Darren Oster
A: 

I've encountered the same error, solved it by positioning the element with position: relative; width: 709px; The fixed width did the trick.

+1  A: 

setting a fixed width worked for me too

Ryan Twilley
Fixed width alone seems to do the trick. No need for any positioning.
nickb