jQuery tab rotation effect besides toggle?

Question

I have a jQuery slider rotation here: http://8wayrun.com/

Every 5 seconds, the slide changes. I am using this code:

$("#recentSlider").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);

The problem with this is evident if you look at it on my site; when it changes the slide, it fades out the current slide, then fades in the new slide. So there is a point in time when there is no slide on the screen. Is there a way to make it so that the new slide fades in while the old slide is fading out? So that there isn't any black emptiness?

I added a little extra info to address the specific code you have here. Follow the link below. — Dylan Hayes, Nov 18 '11 at 04:28
From source code, seems to be jQuery Tools Tabs and not the jQuery UI one — FelipeAls, Nov 18 '11 at 06:30
If you are using third party js plugins then you need to identify them in your question. We shouldn't have to muck through your source code. — mrtsherman, Nov 18 '11 at 19:16

score 0 · Accepted Answer · answered Nov 18 '11 at 19:15

I have never used this plugin, but they provide great documentation. PS - A fiddle would help a ton here.

http://flowplayer.org/tools/tabs/index.html#effects

You can add your own effects

$.tools.tabs.addEffect("default", function(tabIndex, done) {

    // fade out all other panes and fade in new pane
    this.getPanes().animate({ opacity: .3; }).eq(tabIndex).fadeIn();

    // the supplied callback must be called after the effect has finished its job
    done.call();
});

And then use it for your tabs effect like so

$("#recentSlider").tabs("<pane_selector>", {
    effect: 'myeffect',
});

jQuery tab rotation effect besides toggle?

1 Answers1