Project:Quick Tabs
Version:6.x-2.0-rc3
Component:User interface
Category:feature request
Priority:normal
Assigned:Unassigned
Status:closed (duplicate)

Issue Summary

I am wondering if you might ever include some kind of jquery animation effects when switching quicktabs -- like a slider or a fade in/out?

Or is there a way to add this kind of functionality to quicktabs through another module?

I had a hard time deciding between using the Slider module and using Quicktabs for my main content area, but went with Quicktabs because of how easy it is... but I would love a way to animate between tabs...

I would buy someone a beer (or more), if they could help me get this done...

thank you

Comments

#1

Status:active» closed (duplicate)

#327436: Fade or slide effect when changing tabs

#2

If you are eager to get such functionality, then

in quicktabs.js change

tab.tabpage.show();

to
tab.tabpage.fadeIn("slow");

#3

wow! thank you! how can i buy you that beer?

#4

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!!!

#5

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.

#6

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.