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

Answer 1

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/