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.

1. Track comments via RSS 2.0 feed. Feel free to post the comment, or trackback from your web site.

   Currently there are no comments related to article "Spry Tabbed Panel Fade Transition".

* Name

* E-mail

Website

Comment