Provide simple default transitions so we don't have to hack core

#327436: Fade or slide effect when changing tabs

If you are eager to get such functionality, then

in quicktabs.js change

tab.tabpage.show();

to

tab.tabpage.fadeIn("slow");

I was hoping this would work and got all excited. However I think the code has been changed and I not longer see where to change this. Could you be kind to update this idea for the current code? Thanks!!!

yes me too!! I have two tabs with rotor items in them and the text gets overlapped for a second when I change between tabs and then corrects itself. I thought this transition effect would solve my problem. So if anyone can help me out as to where the transition occurs. I think it takes place somewhere around line 150, but I'm not sure how to get it work for me.

Drupal.quicktabs.clickHandler = function(event) {
  var tab = event.data.tab;
  var element = this;
  // Set clicked tab to active.
  $(this).parents('li').siblings().removeClass('active');
  $(this).parents('li').addClass('active');

  // Hide all tabpages.
  tab.container.children().fadeOut(750);
  
  if (!tab.tabpage.hasClass("quicktabs-tabpage")) {
    tab = new Drupal.quicktabs.tab(element);
  }

  tab.tabpage.fadeIn(1000);

  return false;
}

You also have to use absolute position so the content of the tabs would be on top of each other. It still is a hack. Would be cool if it would be implemented as feature.

this worked for me, but there were a few issues using both fade in and fade out without absolute positioning:
-js loads too slow and causes the tabs to freakout on pageloads and while hiding.
the following css helped fix the messy transitions:

html.js .quicktabs_tabpage{display:none;}
.quicktabs_main .quicktabs-hide{display:none!important;}

-the first rule hides the content until js loads and then adds the inline style="display:block"
-second rule hides the overflowing tabpages (mid-transition) that stretch the page.

attached is a patch (including js fades), please review.

Whoops, tested with ajax style and the first css line wasn't being overwritten by js.

should be: html.js .quicktabs_tabpage{display:block;}

attached is fixed up patch

alright, this has to be the one, fading-out just has too many theme related bugs to handle for me. simple fadeout does it, with one css fix.
subtle, but definitely an improvement over having no effect at all.

I am closing this issue, since it's for a Drupal version no longer supported.