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.

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.

• javascript
• jquery
• jquery-ui
• jquery-ui-tabs

• I don't see where you're attempting to manipulate the tab content in that code. – isherwood Commented Jul 17, 2014 at 20:56
• That's my problem currently. The things that i've tried I have since removed, because they weren't working. Let me see if I still have an example of what i've tried. – Tyler Gerig Commented Jul 17, 2014 at 20:57

1 Answer 1

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

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

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

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

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