CODEWITHSUNDEEP
javascriptjqueryjquery-uicss
andyuk
andyuk

Reputation: 39118

How do I do CSS transitions with jQuery UI tabs?

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?

Upvotes: 1

Views: 2957

Answers (2)

Picard
Picard

Reputation: 4112

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" }
});

Upvotes: 2

andyuk
andyuk

Reputation: 39118

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.

Upvotes: 1

Related Questions