How to add a cross fade to UI tabs?

Hi I co开发者_高级运维py question from http://forum.jquery.com/topic/how-to-add-a-cross-fade-to-ui-tabs, because I have same question.

Hi all

I have set up a tabbed interface using standard UI tab code.

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

At the moment the tab that is one display fades out, leaving a white space before the next tab appears.

What I would like to happen is as tab1 fades out, tab 2 fades in - creating a cross fade.

Can anyone tell me how to achieve this?

Thanks in advance

I think Jquery UI can't do this by default. However jQuery Tabs UI comes with a event "show", where you can write some custom code to toggle the tabs yourself.

$(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/

Great answer Richard just what I needed! I had a thought that your solution calls 2 animations (fade out and fade in) which on my js-heavy page was looking a little less than smooth. I have edited your solution slightly to use the z-index and 1 fade. This makes things a bit 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 the rotate at the end since this makes for quite a nice slideshow!

Tom

I don't know if the above answers worked for an earlier version of jQuery UI, but the show and hide properties do not work this way currently. The effect can be achieved using beforeActivate:

$("#tabbedArea").tabs({
    hide: 1000,
    beforeActivate: function(event, ui){
        ui.newPanel.css('zIndex', 1).fadeIn(1000, function(){
            $(this).css('zIndex', '');
        });
    }
});

Note the tab panels must be positioned absolutely.