jQuery slideToggle and Internet Explorer
Just noticed something quirky today regarding jQuery’s slideToggle effect in Internet Explorer versions 6 and 7. (I’m guessing the use of jQuery’s slideDown and slideUp will give you the same problem.) I’ve been creating some nice sliding div effects these past couple of weeks in work and wondering why the slide animation in IE6+ was so jagged and clunky, while Firefox and Safari rendered it perfectly. Through the process of elimination and some hair loss, I figured it out.
The fix:
Be sure that whatever it is you’re sliding (usually a div) doesn’t have any associated CSS attribute position declared. It doesn’t matter if it’s position: relative or position: absolute, or if this styling is applied to the sliding element or to a child of the sliding element; just rip it out of there.
Do that and your slideToggle should look all smooth in every browser.
September 26th, 2007 at 5:12 pm
seems to be one of the golden rules of JQuery…. if something isnt behaving as it should, strip off the position attributes around it and build it back up again correctly. I spent 2 hours the other day trying to pick something apart and it turned out that it was because i had assigned position relative to it…. painful!
September 26th, 2007 at 5:33 pm
Floats are my new best friend. I don’t find it as quick and easy to position stuff with floats, but it seems like the best way to avoid the cross-browser issues. Damn you, IE!
September 26th, 2007 at 5:50 pm
I find safari worse than IE these days…. I’d love to smack it!
September 27th, 2007 at 9:52 am
Safari is a beautiful and unique snowflake.
September 27th, 2007 at 8:19 pm
Damn right Jason, it melts next to Firefox.
October 9th, 2007 at 1:54 am
[…] Niall Doherty » Blog » Blog Archive » jQuery slideToggle and Internet Explorer need to try this, I’m tired of my elements jumping around like Tom Cruise (tags: javascript webdev jquery) […]
January 23rd, 2008 at 3:07 pm
One thing that also might help: give a height of 101% in CSS to all block-level-elements involved!
This solved my problems with jquery-slideUp/slideDown and IE.
May 20th, 2008 at 5:45 pm
Johannes Lietz, thank you so much! I tried the 101% tweak and now it works! Otherwise I’d commit a suicide, i think (wasted so much time trying to guess what that fripping IE wanted)