Fade effect with tabbed panels

Question

The background image of the tabbed panel flashes before the
new images fade in from 0% to 100%:
Demo page
Sometimes the effect works as intended and fades in
perfectly...however it consistently resorts to flashing first --
any ideas how to fix this?

Answer 1

These code snippet no longer work with the out of box 1.6
release. any hints on how to work around the initial blink problem?
Seems like these methods could be better designed.
I am building the code using the designer and this is my
tabbed pane:
<div id="MainTabbedPane" class="VTabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('TabbedPanelsContent1','FrontPage.html');MM_effectBlind ('TabbedPanelsContent1',
1000, '0%', '100%', false)">Home</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('TabbedPanelsContent2','SchedRates.html');MM_effectAppe arFade('TabbedPanelsContent2',
1000, 0, 100, false)">Schedule &amp; Rates</li>
<li class="TabbedPanelsTab" tabindex="0">Program
&amp; Description</li>
<li class="TabbedPanelsTab"
tabindex="0">Retreats</li>
<li class="TabbedPanelsTab"
tabindex="0">Bio</li>
<li class="TabbedPanelsTab" tabindex="0">Studio
Cats</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"
id="TabbedPanelsContent1">Front Page!!!</div>
<div class="TabbedPanelsContent"
id="TabbedPanelsContent2">Schedule &amp; Rates</div>
<div class="TabbedPanelsContent"
id="TabbedPanelsContent3">Program &amp;
Description</div>
<div class="TabbedPanelsContent"
id="TabbedPanelsContent4">Retreats</div>
<div class="TabbedPanelsContent"
id="TabbedPanelsContent5">Bio</div>
<div class="TabbedPanelsContent"
id="TabbedPanelsContent6">Studio Cats</div>
</div>
</div>
Likes like there is one sloppy method override as well:
function MM_effectAppearFade(targetElement, duration, from,
to, toggle)
Spry.Effect.DoFade(targetElement, {duration: duration, from:
from, to: to, toggle: toggle});
}