<slide title="People Map">

<break lines="1" />
<blurb fontsize="6em">
Implement fancy fading tab views
</blurb>

<example result="0" marginright="1em" fontsize="1.5"><![CDATA[ var tabView = new YAHOO.widget.TabView('tabContainer');

 tabView.contentTransition = function(newTab, oldTab) {
   if ( newTab.anim && newTab.anim.isAnimated() ) {
      newTab.anim.stop(true);
   }

   newTab.set('contentVisible', true);
   YAHOO.util.Dom.setStyle(newTab.get('contentEl'), 'opacity', 0);

   newTab.anim = newTab.anim || new YAHOO.util.Anim(newTab.get('contentEl'));
   newTab.anim.attributes.opacity = { to: 1 };

   var hideContent = function() {
      oldTab.set('contentVisible', false);
      oldTab.anim.onComplete.unsubscribe(hideContent);
   };

   oldTab.anim = oldTab.anim || new YAHOO.util.Anim(oldTab.get('contentEl'));
   oldTab.anim.onComplete.subscribe(hideContent, this, true);
   oldTab.anim.attributes.opacity = { to: 0 };

   newTab.anim.animate();
   oldTab.anim.animate();
 }; ]]></example>

</slide>
