I am using jQuery UI Tabs for the below menu + DIV combination. The first "DIV" (tc0) currently has static content, however, the last 3 have dynamic content (or AJAX) that are loaded from 3 PHP files.
<div id="tabs"><!--Tabs-->
<ul class="grid_12 alpha" id="hmenu">
<li><a href="#tc0">Link 1</a></li>
<li><a href="example1.php">Link PHP 1</a></li>
<li><a href="example2.php">Link PHP 2</a></li>
<li><a href="example3.php">Link PHP 3</a></li>
</ul>
<div class="grid_12 alpha tcon" id="tc0">
<h2 class="grid_12">Dashboard</h2>
</div>
</div><!--/Close Tabs-->
All the PHP files have the same structure as the div with id="tc0". I've just omitted to list them all. The class "tcon" has regular styling, nothing that affects opacity or display. The grid_12 and alpha are part of the 960.gs.
My jQuery is as follows:
<script type="text/javascript"><!--//TABS-->
$(document).ready(function(){
$("#tabs").tabs({ fx: { opacity: 'toggle' } })
});
</script><!--//END TABS-->
The problem is as follows:
When clicking from one tab to the other, before the new tab content is shown, the current tab content is flashed and then the opacity is done.
Before, when all my tabs had "static" content, the opacity worked fine, there was no flash of the tabs content. Now, with the "php" content, there is that flash.
I don't believe this is a FOUC (Flash of Unstyled Content) as my content flashes all styled. The problem is that the current tab / content is reflashed before the transition to the next tab.
If I remove the "fx: opacity" combination, it works fine.
Any ideas are greatly appreciated.