title: jQuery UI Tabs rotate, fx and event: mouseover all together in one
body: <p>I've looked at all the tutorials I can find, examined the questions on here and read the jQuery UI Tabs source but I still can't figure this out.</p>
  
  <p>My goal is to have a rotating content box, with an fx fade and mouseover effect on the navigation numbers.</p>
  
  <p>You can see the almost working version here:<br>
  <a href="http://www.chesapeakelifemag.com/index.php/cl_new/index" rel="nofollow noreferrer">http://www.chesapeakelifemag.com/index.php/cl_new/index</a></p>
  
  <p>As you can see the mouseover works and the rotation works but the effects won't show. This is the code I'm working from</p>
  
  <pre><code>$(document).ready(function(){
    $("#content_slider").tabs(
            {event: 'mouseover'}).tabs(
            { fx: [{opacity: 'fadeOut', duration: 'slow'},
            {opacity: 'toggle', duration: 'fast'}] }).tabs(
           'rotate', 5000, true);
    });
  </code></pre>
  
  <p>I feel like I'm stringing together a ton of arguments that should all go into one .tabs() function but when I try that the functionallity of mouseover, fx or rotation breaks.</p>
  
  <p>Does anyone have an answer?</p>
  
  <pre><code>$(document).ready(function(){
  $("#content_slider").tabs({event: 'mouseover', 
          fx: [{opacity: 'fadeOut', duration: '100'}, 
               {opacity: 'toggle', duration: 'fast'}]}).tabs(
          'rotate', 7000, true);
  });'
  </code></pre>