How to delay jQuery TOOLS tab change?

Question

Hello!

I have a problem with jQuery TOOLS Tabs. I set the event to mouseover and if I move the mouse too fast then more panes appear. Is there a way to delay the switching of tabs or a fix for this?

Answer 1

After rereading I understood what your problem is. When using event:'mouseover' and effect:'fade' and moving really fast over the tabs you are right that multiple tabs might stay opened at the end.

Took a look at the tabs source code. Based on the tabs code I provide a custom made myfade effect for you which eliminates your problem.

//add custom effect with name myfade
$.tools.tabs.addEffect("myfade", function(i, done) {
    var conf = this.getConf(),
    speed = conf.fadeOutSpeed,
    panes = this.getPanes();
    panes.stop(true,true);

    if (speed) {
        panes.fadeOut(speed);
    } else {
        panes.hide();
    }
    panes.eq(i).fadeIn(conf.fadeInSpeed, done);
});
....
$(selectorForTabs).tabs({event:'mouseover', effect:'myfade'});

---

I can't reproduce your problem (which btw. you described very vaguely. You also didn't provide any javascript/html code which might give some insight into your problem).

Check here for a sample where (no matter how fast you move the mouse you will only see one tab)

jQuery Tools Tabs: Using mouseover to switch tabs