How to add a cross fade to UI tabs?

Question

Hi I copy 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

Possible duplicate: http://stackoverflow.com/questions/1350666/jquery-ui-tabs-available-fx-options — ifaour, Jan 09 '11 at 14:50
the question not answer proper - its still white between change and not proper cross-fade. Soo my question still not answered — Ben, Jan 09 '11 at 15:23

score 6 · Answer 1 · answered Feb 18 '11 at 11:50

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/

Is it possible to make it compatible with the latest versions of jQuery (1.10.1) and jQuery UI (1.10.3)? — Ian Y., Jun 07 '13 at 04:13

score 2 · Answer 2 · answered Apr 05 '11 at 11:14

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

score 0 · Answer 3 · answered Jun 27 '18 at 03:39

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.

How to add a cross fade to UI tabs?

3 Answers3