Geek Answers Handbook

JQuery animates "width: toggle" causing intermittent flickering

I'm currently working on a tool that has a tabbed section that toggles the width to max and zero when clicking on the tab. The entire div containing the tab and section is fixed and located in the upper right corner of the window. This is 95%, but has intermittent flickering that occurs when the extended section has a width that is folded to zero using the $.animate({width: "toggle"}); method $.animate({width: "toggle"}); . Any ideas on what could be causing this?

Here it is in the fiddle - http://jsfiddle.net/Tgdrb . I tried to simplify it as much as I could so that it still showed the problem, but was not completely out of context of how it really would look on the page. I also mark this as a CSS question, as I am wondering how I structured my CSS that causes the problem (I won’t be surprised if that is the case).

Thanks guys!

+4
source share
1 answer

In case anyone is interested, there is a way to do this, which is pure CSS3. It will not work in IE (yet), but it is degrading gracefully, so it works pretty nicely.

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

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

+2
source

More articles:


All Articles