How to add cross fade to user interface tabs?

Question

Hi, I am copying a question from http://forum.jquery.com/topic/how-to-add-a-cross-fade-to-ui-tabs because I have the same question.

Hello to all

I installed the tabbed interface using the standard tab code of the user interface.

<script type="text/javascript"> $(function() { $("#tabbedArea").tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 6000, 'true') }); </script> 

The moment a tab, which is a single display, disappears, leaving a space before the next tab appears.

What I would like, since tab1 disappears, tab 2 fades out - creating cross fading.

Can someone tell me how to do this?

Thank you in advance

Answer 1

I think the jQuery user interface cannot do this by default. However, the jQuery Tab UI tab contains a “show” event , where you can write some custom code to switch the tabs themselves.

 $(document).ready(function() { $("#tabs").tabs({ show: function(event, ui) { var lastOpenedPanel = $(this).data("lastOpenedPanel"); if (!$(this).data("topPositionTab")) { $(this).data("topPositionTab", $(ui.panel).position().top) } //Dont use the builtin fx effects. This will fade in/out both tabs, we dont want that //Fadein the new tab yourself $(ui.panel).hide().fadeIn(500); if (lastOpenedPanel) { // 1. Show the previous opened tab by removing the jQuery UI class // 2. Make the tab temporary position:absolute so the two tabs will overlap // 3. Set topposition so they will overlap if you go from tab 1 to tab 0 // 4. Remove position:absolute after animation lastOpenedPanel .toggleClass("ui-tabs-hide") .css("position", "absolute") .css("top", $(this).data("topPositionTab") + "px") .fadeOut(500, function() { $(this) .css("position", ""); }); } //Saving the last tab has been opened $(this).data("lastOpenedPanel", $(ui.panel)); } }); }); 

Live demo:

http://jsfiddle.net/FFTzU/7/

Answer 2

Great answer to Richard, what I need! I got the idea that your solution calls 2 animations (fades and fades) which on my js-heavy page looked a little less smooth. I changed the solution a bit to use z-index and 1 fade. This makes things a little smoother for me, at least.

 $("#tabs").tabs({ show: function(event, ui) { var lastOpenedPanel = $(this).data("lastOpenedPanel"); if (!$(this).data("topPositionTab")) { $(this).data("topPositionTab", $(ui.panel).position().top) } // do crossfade of tabs $(ui.panel).hide().css('z-index', 2).fadeIn(1000, function() { $(this).css('z-index', ''); if (lastOpenedPanel) { lastOpenedPanel .toggleClass("ui-tabs-hide") .hide(); } }); $(this).data("lastOpenedPanel", $(ui.panel)); } }).tabs('rotate', 3000); 

I added a twist at the end, as it makes a pretty nice slideshow!

Tom