jQuery fadeOut() has no animation in specific situations. workaround?
<p>I've run into a situation where a jQuery fadeOut() isn't working as expected. My test case is the Facebook profile homepage, on items of class <code>text</code>.  I'm doing this through userscripts, but my test case it just running in the console (I've loaded jQuery into the page using a <a href="http://erikvold.com/blog/index.cfm/2010/6/14/using-jquery-with-a-user-script" rel="nofollow">userscript</a>, but you can use your favorite method (paste it in, <a href="https://chrome.google.com/webstore/detail/gbmifchmngifmadobkcpijhhldeeelkc" rel="nofollow">jqueryify</a> for chrome, etc.)).</p>

<p>Here's a demo movie: <a href="http://www.youtube.com/watch?v=Fsh5nQY8n4k" rel="nofollow">http://www.youtube.com/watch?v=Fsh5nQY8n4k</a> .  Movie shows the problem on Chrome, but I get similar behavior on Firefox and Safari (all OSX).</p>

<p>The lines of code I'm using here are: <code>$('.text').fadeOut();</code> and <code>$('.text').fadeIn();</code></p>

<p>I've tried some workarounds, such as animating opacity directly, animating some of the fade first, and then animating the rest with a callback, setting the z-index for the item first, etc. I also tried turning on <a href="http://stackoverflow.com/questions/10856728/end-of-jquery-fadein-has-a-bump-in-chrome">webkit antialiasing, a workaround for another jquery animation bug in Chrome</a>. None make a difference.</p>

<p>I'm guessing there's something going on with how Facebook has these elements coded, since I can't reproduce the problem with a jsfiddle (?)</p>

<p>Any ideas for getting that text to fade out as expected?</p>
