Sprytab Panel code for fade transition.

Question

Hello,
I am using the spry panel tabs, and they work great for what I need them for. However I thought it would be cool in this day and time to see if there would be a small script tag to add to the code to get them to fade on click to next tab content.
Here is the direct link.
Fantasy Football: DA-DARK_2015
Here is the spry on that page.
<div id="TabbedPanels41" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Breaking News</li>
    <li class="TabbedPanelsTab" tabindex="0">Trending Now</li>
    <li class="TabbedPanelsTab" tabindex="0">League Articles</li>
    <li class="TabbedPanelsTab" tabindex="0">Previews</li>
    <li class="TabbedPanelsTab" tabindex="0">Recaps</li>
    <li class="TabbedPanelsTab" tabindex="0">Videos</li>
    <li class="TabbedPanelsTab" tabindex="0">Trash-Talk Video</li>   
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent"><module name="NEWS_ARTICLES" COUNT="10"/> </div>
    <div class="TabbedPanelsContent"><module name="HOT_NEWS"/> </div>
    <div class="TabbedPanelsContent"><module name="ARTICLE"/> </div>
    <div class="TabbedPanelsContent"><module name="FANTASY_PREVIEW"/> </div>
    <div class="TabbedPanelsContent"><module name="FANTASY_RECAP"/> </div>
    <div class="TabbedPanelsContent"><module name="YOUTUBEVIDEO"/>  </div>
    <div class="TabbedPanelsContent"><module name="TRASHTALKVIDEOS"/>  </div>
  </div>
</div>
<script type="text/javascript">
var TabbedPanels = new Spry.Widget.TabbedPanels("TabbedPanels41");
</script>
Where the <script> tag is, I was hoping something more could go there for the fade effect and have some control over it also would be ideal.
Thank you

Answer 1

So is it me or does this github page don't have a direct download of these scripts? I didn't see it if they did, however I was able to grab the effect script and make my own JS file from it.
and I see some issues with this unfortunately.
The site
Fantasy Football: DA-DARK_2015
Bottom page you can see my test tabs
Here is my code altered from what as posted for my content and I removed the css file and tab js as I have those pulled already.
<div id="TabbedPanels1" class="TabbedPanels"> 
  <ul class="TabbedPanelsTabGroup"> 
    <li id="fade1" class="TabbedPanelsTab" tabindex="0" onclick="fade1.start(); fade_content1.start();">My Roster</li> 
<li id="fade2" class="TabbedPanelsTab" tabindex="0" onclick="fade1.start(); fade_content1.start();">My News</li> 
    <li id="fade3" class="TabbedPanelsTab" tabindex="0" onclick="fade2.start(); fade_content2.start();">My Bye Weeks</li> 
    <li id="fade4" class="TabbedPanelsTab" tabindex="0" onclick="fade3.start(); fade_content3.start();">Pending Waivers</li> 
    <li id="fade5" class="TabbedPanelsTab" tabindex="0" onclick="fade4.start(); fade_content4.start();">All My Leagues</li> 
  </ul> 
  <div class="TabbedPanelsContentGroup"> 
    <div class="TabbedPanelsContent"> 
      <div id="fade_content1"><module name="ROSTER"/>   </div> 
    </div> 
    <div class="TabbedPanelsContent"> 
      <div id="fade_content2"><module name="MY_NEWS" COUNT="10"/></div> 
    </div> 
    <div class="TabbedPanelsContent"> 
      <div id="fade_content3"><module name="MY_BYE_WEEKS"/> </div> 
    </div> 
    <div class="TabbedPanelsContent"> 
      <div id="fade_content4"><module name="MY_PENDING_WAIVERS"/> </div> 
    </div> 
   <div id="fade_content5"><module name="ALL_MY_LEAGUES"/></div> 
    </div> 
  </div> 
</div> 
<script src="http://www.dagrafixdesigns.com/DA/spryeffects.js"></script> 
<script> 
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1"); 
var fade1 = new Spry.Effect.Fade("fade1", {duration:3000, from:0, to:100, toggle:false});  
var fade_content1 = new Spry.Effect.Fade("fade_content1", {duration:3000, from:0, to:100, toggle:false}); 
var fade2 = new Spry.Effect.Fade("fade2", {duration:3000, from:0, to:100, toggle:false}); 
var fade_content2 = new Spry.Effect.Fade("fade_content2", {duration:3000, from:0, to:100, toggle:false}); 
var fade3 = new Spry.Effect.Fade("fade3", {duration:3000, from:0, to:100, toggle:false}); 
var fade_content3 = new Spry.Effect.Fade("fade_content3", {duration:3000, from:0, to:100, toggle:false}); 
var fade4 = new Spry.Effect.Fade("fade4", {duration:3000, from:0, to:100, toggle:false}); 
var fade_content4 = new Spry.Effect.Fade("fade_content4", {duration:3000, from:0, to:100, toggle:false}); 
</script>
Probably I am seeing is the actual tab next to the one you click is showing fade effects, I don't want any of the tabs having an effect, just the content.
Second problem I see is, only one you click to a tab, and then back to the first tab MY ROSTERS, does that content actually fade....only.   Each tab content should fade with tab click as it comes into view.
Are these fixable, or should I just let it go and focus on another newer platform as in the first post?