Fade or slide effect when changing tabs

Moving new features to 3.x version

can we get a correct link to view a demo

What is the status of this? I see consistent updates to 6.x-2 but no updates to 6.x-3 for nearly a year. Is this just not going to happen for D6?

I have attempted to add a .slideUp / .slideDown to the quicktabs.js but without any luck. Has anyone been able to achieve this yet or even a different jQuery effect such as fade?

The ability to select the jQuery effect on quicktabs through an API would be an awesome feature.

I was searching for a way to do this also, its very jarring to have all the content instantly pop out and then loading the next tab. Id even be willing to pitch in to pay someone for there time in implementing a transition. Please! :)

subscribing. if anyone wants to pick this up we'll join RikiB with the pitching.

Mmmm.. a cross fade quick tab ;)

Subscribing. Really like this module. Would be glad to help work on this feature, don't really know where to start though. Most of javascript in this module is pretty out of my league. Seems like it good be implemented with jQuery's .fadeIn or .slideDownfunction as attempted in #5?

Subscribing.

I've bought a theme from themeforest (link); The theme developer has edited quicktabs module adding this effect, the customization he made are at line 148 of the file quicktabs/js/quicktabs.js:

  // Hide all tabpages.
  tab.container.children().slideUp('medium').addClass('quicktabs-hide');

  // Show the active tabpage.
  if (tab.tabpage.slideDown('slow').hasClass('quicktabs_tabpage')) {
    tab.tabpage.slideDown('slow').removeClass('quicktabs-hide');
  }

The edits are the `slideUp('medium')` and `slideDown('slow')`.

I'll go with the original version of this module, i really dont like this kind of edit that compromise future updates of the module.. and a option in the quicktab admin page will be great.

In attachments the edited version of quicktabs.js

Hey thanks for the code, I'm going to play with this more to get the fade animations to actually fade over each other rather than appending to the current tab, but this code should work better with most tab layouts, the themeforest style was a bit hard harsh with the tabs i tested. We should also add the ability to put effects in the menu like mentioned prior.

line 148

// Hide all tabpages.
  tab.container.children().slideUp(1000).addClass('quicktabs-hide');

  // Show the active tabpage.
  if (tab.tabpage.fadeIn(1300).hasClass('quicktabs_tabpage')) {
    tab.tabpage.fadeIn(1300).removeClass('quicktabs-hide');
  }

Tab sliding is welcome feauture.

All this cool stuff doesn't seem to work in the 7-version. I've created an issue : http://drupal.org/node/1238082
Someone know how to do this ?

Yes, it just a different line and some slightly different code. Go to line 53 and change this:

// Hide all tabpages.
tab.container.children().addClass('quicktabs-hide');

if (!tab.tabpage.hasClass("quicktabs-tabpage")) {
tab = new Drupal.quicktabs.tab(element);
}

tab.tabpage.removeClass('quicktabs-hide');

to this (the transitions still are a little clunky, you'll have to play with it):

// Hide all tabpages.
tab.container.children().fadeOut(1000).addClass('quicktabs-hide');

if (!tab.tabpage.fadeIn(1300).hasClass("quicktabs-tabpage")) {
tab = new Drupal.quicktabs.tab(element);
}

tab.tabpage.fadeIn(1300).removeClass('quicktabs-hide');

Thanks for your post Seagle !! I came up with this nice scroll transition:

// Hide all tabpages.
tab.container.children().slideUp(500).addClass('quicktabs-hide');
if (!tab.tabpage.slideDown(500).hasClass("quicktabs-tabpage")) {
tab = new Drupal.quicktabs.tab(element);
}
tab.tabpage.slideDown(500).removeClass('quicktabs-hide');
}

Cool effect !!

for version 6x3.0 of this module i changed the code at line 144 to:

<?php
var quicktabsClick = function() {

  var tab = new Drupal.quicktabs.tab(this);

  // Set clicked tab to active.
  $(this).parents('li').siblings().removeClass('active');
  $(this).parents('li').addClass('active');

  // Hide all tabpages.
  tab.container.children().hide().addClass('quicktabs-hide');

  // Show the active tabpage.
  if (tab.tabpage.hasClass('quicktabs_tabpage')) {
    tab.tabpage.fadeIn('slow').removeClass('quicktabs-hide');
  }
?>

This patch adds a check on whether all tabs were hidden before showing the next tab.

Hello, can you please tell me, is it possible to use effect in tab changing like this: http://codepen.io/bmodena/pen/Fybdu ?

Thanks

With D7 EOL approaching in a month I'm starting to triage the D7 side of quicktabs queue.

If still an issue or needed for 4.0.x (latest branch) feel free to reopen