How do I do CSS transitions with jQuery UI tabs?

Question

I want smooth transitions between tabs when the user clicks on a tab.

I know jQuery tabs supports basic animations (see this question about animation fx), but how can I do smooth transitions?

Answer 1

things got easier over the years, now it's a built in option for that, for example slide to-left-out and from-right-in is just:

$("#tabs .tabs-container-wrapper .tabs-container").tabs({
        hide: { effect: "slide", duration: 800, direction: "left", easing: "easeInOutQuart" },
        show: { effect: "slide", duration: 800, direction: "right", easing: "easeInOutQuart" }
});

Answer 2

You will need to do a few things to get this working:

1. Do not use the CSS that comes with jQuery UI

2. Structure your HTML so your tabs can slide left and right.

3. Add CSS for the "left" transition. For example:

   #tabs .tabs-container-wrapper .tabs-container { transition:left 0.5s ease-in-out; }
   

4. When a tab is selected, change the "left" value.

   $(function() {
     var onTabChange = function(event, ui) {
       $("#tabs .tabs-container-wrapper .tabs-container").css("left", offsets[ui.index]);
     };
     $('#tabs').tabs().bind('tabsselect', onTabChange);
   });
   

See this gist for a full working example.

This will work with modern browsers that support transitions and fall back to normal tab behaviour if it's not supported.