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?

Answer 1

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',
});