jQuery UI Tabs rotate, fx and event: mouseover all together in one.

Question

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.

My goal is to have a rotating content box, with an fx fade and mouseover effect on the navigation numbers.

You can see the almost working version here:
http://www.chesapeakelifemag.com/index.php/cl_new/index

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

$(document).ready(function(){
  $("#content_slider").tabs(
          {event: 'mouseover'}).tabs(
          { fx: [{opacity: 'fadeOut', duration: 'slow'},
          {opacity: 'toggle', duration: 'fast'}] }).tabs(
         'rotate', 5000, true);
  });

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.

Does anyone have an answer?

$(document).ready(function(){
$("#content_slider").tabs({event: 'mouseover', 
        fx: [{opacity: 'fadeOut', duration: '100'}, 
             {opacity: 'toggle', duration: 'fast'}]}).tabs(
        'rotate', 7000, true);
});'

Answer 1

Try the following format:

$(document).ready(function() {
    $("#content_slider").tabs({
        event: 'mouseover',
        fx: {
            opacity: 'toggle',
            duration: 'slow'
        }
    }).tabs('rotate', 5000, true);
});

I use tabs in an application and I added the above fx property and it worked. I'm not certain that your script structures the effects correctly.

Answer 2

Hi,

Is this solution working in IE 6.0?

Thanks, Gurvinder