Как сделать плавное перелистывание контента табов?

Question

[sanekstr]

Здравствуйте, помогите пожалуйста, имеются табы, их можно перелистывать как слайдер.
Но хотелось бы чтобы перелистывание контента табов было плавным. Помогите пожалуйста сделать. Заранее большое спасибо

ul.tabs li.current{
	color: red; 
}

.tab-content{
	display: none;
}

.tab-content.current{
	display: inherit;
    border: 1px solid green;
}

<div class="tabs">
    <button class="tab_nav" id="next_left"> <- </button>
    <button class="tab_nav" id="next_right"> -> </button>
    <ul class="tabs">
        <li class="tab-link current" id="link-1" data-tab="tab-1">One</li>
        <li class="tab-link" id="link-2" data-tab="tab-2">Two</li>
        <li class="tab-link" id="link-3" data-tab="tab-3">Three</li>
    </ul>
    <div id="tab-1" class="tab-content current">
        content 1
    </div>
    <div id="tab-2" class="tab-content">
        content 2
    </div>
    <div id="tab-3" class="tab-content">
        content 3
    </div>              
</div>

$(document).ready(function(){
    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');
        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    });
});

$(document).ready(function(){
    $('.tab_nav').click(function(){
        if(this.id == 'next_left') {
            $d = 'l';
        }
        if(this.id == 'next_right') {
            $d = 'r';
        }
        $max = document.getElementsByClassName('tab-link').length;
        $currentlink = document.getElementsByClassName('current')[0].id;
        $arraylink = $currentlink.split('-');
        $curlink = $arraylink[1];
        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');
        if ($d == 'l') {
            if ($curlink == 1) {
                $link = "#link-"+ $max;
                $tab = "#tab-"+ $max;
            }
            else {
                $link = "#link-" + ($curlink-1);
                $tab = "#tab-" + ($curlink-1);
            }
        }
        else if ($d == 'r' ) {
            if ($curlink == $max) {
                $link = "#link-1";
                $tab = "#tab-1";
            }
            else {
                $link = "#link-" + (parseInt($curlink)+1);
                $tab = "#tab-" + (parseInt($curlink)+1);
            }
        }
        $($link).addClass('current');
        $($tab).addClass('current');
    });
});

Answer 1

[Алексей Чырва]

Например добавить класс

.t05{
 -webkit-transition: all 0.5s ease;
	-webkit-transition-delay: 0.5s;
  transition: all 0.5s easy;
  transition-delay: 0.5s; 
}

тут pen рабочий

Comments

[sanekstr]

Спасибо, но я не так выразился видать, как бы сделать чтобы сам контент листало плавно, а не сами табы (li)

[littleguga]

sanekstr: что Вы имеете ввиду? контент таба = табу

[sanekstr]

littleguga: Чтобы плавно менялась эта часть s013.radikal.ru/i322/1510/85/ee1a954b0cff.png

[littleguga]

sanekstr: Вы хотите, чтобы рамки оставались на месте, а сам текст менялся?

[sanekstr]

littleguga: Не, я имею ввиду вот чтобы плавно перелистывалось вот это div id="tab-2" class="tab-content"
content 2
div, грубо чтобы текст перелистывался плавно
content 2

[Алексей Чырва]

sanekstr: codepen.io/freewayspb/pen/jbBmgL поправил немного, но по хорошему стоит переписать логику полностью, слишком мудрено написано

[sanekstr]

Алексей Чырва: Спасибо большое, а скажите почему в вашем примере после перехода с 3 на 1 , происходит как бы сказать прыжок анимации

[Алексей Чырва]

sanekstr: глючит) проблема в переходе с последнего на 1-й слайд, по хорошему надо переписать листалку, займусь на досуге, выложу результат

[sanekstr]

Алексей Чырва: Большое спасибо