CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-tabs
Tyler Gerig
Tyler Gerig

Reputation: 33

jQuery ui tabs : sliding effect when switiching between tabs

I am using jquery ui tabs. I want to apply sliding content effect when switching between tabs i.e on showing and hiding of the tabs content. Here is my DEMO

I'm trying to slide the tab divs with the content in them when I click on the navigation above it all. So Nav link 1 would slide the content of #tabs-1 in front of the screen, etc.

The script I have currently, which has no sliding functionality is :

$(document).ready(function () {
  $('#tabs').tabs();

  $('.sub-nav a').click(function () {
    $('.sub-nav li a').removeClass('subnav-active');
    $(this).addClass('subnav-active');
  });

});

I've tried to do slideToggle, as well as just a fading out and fading in effect, but couldn't get either to work. So i'm reaching out for some assistance, even if all it is, is somewhere to look, that would be greatly appreciated since i'm not the greatest at javascript or jQuery.

Upvotes: 1

Views: 8898

Answers (1)

isherwood
isherwood

Reputation: 61143

jQueryUI has effects built in. No need to roll your own.

http://api.jqueryui.com/slide-effect/

http://jsfiddle.net/isherwood/9jg4r/4/

$('#tabs').tabs({
    hide: {
        effect: "slide",
        duration: 1000
    }
});

Here's an example with show and hide effects: http://jsfiddle.net/isherwood/9jg4r/5

Upvotes: 8

Related Questions