CODEWITHSUNDEEP
jquerycss
Michael Vattuone
Michael Vattuone

Reputation: 319

JQuery animate "width: toggle" causing intermittent flicker

I'm currently working on a tool that has a tabbed section that toggles width to max and zero when a tab is clicked. The whole div that contains the tab and the section is fixed and positioned to the top right of the window. It's 95% there, but has an intermittent flicker that occurs when the expanded section has it's width toggled down to zero using the $.animate({width: "toggle"}); method. Any ideas on what might be causing it?

Here it is in a fiddle - http://jsfiddle.net/Tgdrb. I tried to simplify it as best I could so that it still showed the problem but wasn't totally out of context from how it would actually look on a page. I'm also tagging this as a CSS question, as I wonder if it is the way I've structured my CSS that is causing the problem (I would not be surprised if it is).

Thanks guys!

Upvotes: 4

Views: 1211

Answers (1)

Michael Vattuone
Michael Vattuone

Reputation: 319

In case anyone is curious, there is a way to do this that is pure CSS3. It won't work in IE (yet), but it gracefully degrades, so it works rather nicely.

Fiddle here: http://jsfiddle.net/Tgdrb/17/

So yeah, the answer to this: Chrome causes a redraw. If you don't like the effect, find a better way to do what you want to do.

Upvotes: 2

Related Questions