tabs - rotate and toggle not working together

tabs - rotate and toggle not working together


Hello everyone,
Complete newbie user so excuse the question if it has been already
asked.
I am trying to implement sliding tabs.
using:
$("#specials").tabs().tabs('rotate', 5000); // Rotate every 5 sec.
works great for rotation thought the list.
while toggle is not taking an effect when used and rotation continues
as the above:
$("#specials").tabs({fx:{opacity: 'toggle'}}).tabs('rotate', 5000);
JS:=====================
<link type="text/css" href="css/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.tabs.js"></script>
<script type="text/javascript">
$(function() {
$("#specials").tabs().addClass('ui-tabs-vertical ui-helper-
clearfix').removeClass('ui-corner-all'); // Verical tabs no rounded
corners on container div
$("#specials ul").removeClass('ui-corner-all').addClass('ui-corner-
right');
$("#specials li").removeClass('ui-corner-top').addClass('ui-corner-
right');
//$("#specials").tabs().tabs('rotate', 5000); // Rotate every 5
sec. works
$("#specials").tabs({fx:{opacity: 'toggle'}}).tabs('rotate',
5000);
$(".block").animate({ opacity: 0.65 }, 1 ); //Set Opacity
});
</script>
HTML:===================
<div id="specials">
<ul>
<li><a href="#special-1"><span>Special 1:</span></a></
li>
<li><a href="#special-2"><span>Special 2</span></a></li>
<li><a href="#special-3"><span>Special 3</span></a></li>
</ul>
<div id="special-1">
    <div class="desc">
        <div class="block">
            <h2>Title</h2>
            

Description


        </div>
    </div><!-- end info -->
<a href="http://site.com"><img src="images/special1.jpg"
width="540" height="120" alt="Special #1 Title" /></a>
</div>
<div id="special-2">...
....
</div>
CSS:====================
#specials {
width: 764px; /* 540px + sidebar of 220px */
}
#special-1,#special-2,#special-3 { /* declared so classes do not mix
with jquery */
float: left;
padding: 0;
margin: -30px 0 0 0; /* pushes img up for the 'specials info' */
}
/* --- Specials Info --- */
.desc {
    position: relative;
bottom: -120px;
    left: 0; /* Stick the desc class to the bottom of our main image
container */
    width: 540px;
}
.block{
    width: 540px;
    background: #111;
    border-top: 1px solid #000;
color: #FFF;
}
.block h2 {
font-size: 1em;
font-weight: bold;
padding-left: 4px;
}
.block p {
padding: 4px;
}
=====================
What gives?
Thank you very much!