Spry Tabbed Panel Fade Transition

I have seen many posts on the Adobe Forum regarding this request without any real solution. Following these steps will help you implement a fade out transition effect on the Spry Tabbed Panel Widget.

1. Add the tabbed panel to your site.
2. Model your <li> tags like these:
   <li onclick=”MM_effectAppearFade(‘TabbedPanels1′, 2000, 0, 100, false)” tabindex=”0″ onfocus=”this.blur()”>Foundation</li>
   <li onclick=”MM_effectAppearFade(‘TabbedPanels1′, 2000, 0, 100, false)” tabindex=”0″ onfocus=”this.blur()”>Creative</li>
   <li onclick=”MM_effectAppearFade(‘TabbedPanels1′, 2000, 0, 100, false)” tabindex=”0″ onfocus=”this.blur()”>Programming</li>
   <li onclick=”MM_effectAppearFade(‘TabbedPanels1′, 2000, 0, 100, false)” tabindex=”0″ onfocus=”this.blur()”>Applications</li>
3. Add this inside the </head>
   <script src=”SpryAssets/SpryEffects.js” type=”text/javascript”></script>
   <script type=”text/javascript”>
   <!–
   function MM_effectAppearFade(targetElement, duration, from, to, toggle)
   {
   Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
   }
   function MM_effectHighlight(targetElement, duration, startColor, endColor, restoreColor, toggle)
   {
   Spry.Effect.DoHighlight(targetElement, {duration: duration, from: startColor, to: endColor, restoreColor: restoreColor, toggle: toggle});
   }
   //–>
   </script>
4. Add to the existing class element in SpryTabbedPanels.css
   .TabbedPanelsContent {
   opacity:0; /* sets the intitial opacity to 0 (zero) which prevents the flicker effect */
   filter:alpha(opacity=0); /* for ie6/7 */
   filter: “alpha(opacity=0)”; /* for ie8*/
   }

That’s it. Please let me know if you need to see a demo.