JQuery UI Tabs rotate, fx and event: mouseover all together in one
I've gone through all the tutorials I can find, looked at the questions here, and read the source of the jQuery UI tabs, but I still can't figure it out.
My goal is to have a rotate box, with fx fade and mouseover effect on the nav numbers.
You can see a nearly working version here:
http://www.chesapeakelifemag.com/index.php/cl_new/index
As you can see, the mouse hover and rotation work is working, but the effects will not show. This is the code I am working from
$(document).ready(function(){
$("#content_slider").tabs(
{event: 'mouseover'}).tabs(
{ fx: [{opacity: 'fadeOut', duration: 'slow'},
{opacity: 'toggle', duration: 'fast'}] }).tabs(
'rotate', 5000, true);
});
It seems to me that I am typing a ton of arguments that should all go into one .tabs (), but when I try to make it so that the mouseover, fx or rotation breaks function.
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);
});'
source to share
Try the following format:
$(document).ready(function() {
$("#content_slider").tabs({
event: 'mouseover',
fx: {
opacity: 'toggle',
duration: 'slow'
}
}).tabs('rotate', 5000, true);
});
I am using tabs in my application and I added the fx property above and it worked. I'm not sure if your script is structuring the effects correctly.
source to share