jQuery tabs: Transition happens after mouseover

Question

Hi,

I am using this code:

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

which works fine if I have either the FX or the mouseover, but if I combine the two, the tab content shows, and THEN fades in. Any ideas?

Answer 1

There might be a slight conflict here with event and fx, as both trigger something to "show" content. You need to disable the "show" callback for the event so fx can handle the showing of the goods (I'm think this is were they run into each other). Not sure how to do this out of the box.

  $(document).ready(function(){
    $("#tabs").tabs({
      // fx: {
      //   opacity: 'toggle', duration: 'slow'
      // },
      event: 'mouseover',
      show: function(event, ui) {
        $("#"+ui.panel.id).fadeIn("slow");
      },
      select: function(event, ui) {
        $("#"+ui.panel.id).hide();
      }
    });
  });

But you can do a "hack" of sorts, and instead of having tabs handle the fx, you do it yourself via the event callbacks.

Hopefully this is kosher, I'm a Prototype guy.