jquery - 将当前选项卡向左滑动，从右向右滑动下一个选项卡

Question

我尝试找到我的问题的答案，但没有成功。 例如，我找到了这个:jquery ui tabs slide left and right但它对我没有帮助。

我有一个包含三个选项卡的工作“选项卡部分”(您可以在下面查看代码)。

我想要实现的是当您按下从右侧滑入的下一个选项卡替换另一个选项卡时，使当前选项卡向左滑动(如果您在选项卡中“向后”，则相反)。

看看这个很好的例子:See this tab effect .

我的 HTML:

<ul class="tabs">
    <li class="tab-link current" data-tab="tab-1">Daniel Pettersson</li>
    <li class="tab-link" data-tab="tab-2">Scott Asli</li>
    <li class="tab-link" data-tab="tab-3">Teamet</li>
</ul>

    <div id="tab-1" class="tab-content current">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
    <div id="tab-2" class="tab-content">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
    <div id="tab-3" class="tab-content">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>

CSS:

ul.tabs {
    margin: 0px;
    padding: 0px;
    list-style: none;
    background: #3b3b3b;
}
ul.tabs li {
    background: none;
    color: #b1b1b1;
    display: inline-block;
    padding: 10px 25px;
    cursor: pointer;
}
ul.tabs li.current {
    color: #fff;
    background: url('images/tab-arrow.png') no-repeat 50% 100%;
}
.tab-content {
    display: none;
    background: transparent;
    padding: 30px 0;
    height:300px;
}
.tab-content.current { display: inherit; }

还有 jQuery:

$(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');
    })

})

我需要做什么才能实现这一目标？

非常感谢任何帮助!谢谢。

编辑:我在示例页面上找到了这段 js 代码，它具有我想要的效果:

//slide the button to the next item
function goNext() {
    if ( decount != counter) {
    $('#slider ul').animate({ left: '-=' + $('#slider').width() }, 400, 'swing', function() { });
    $('.active').removeClass('active').next().addClass('active');
    decount++;
    window.location.hash = decount;
    }
}

function goBack() {
    if ( decount != 1) {
    $('#slider ul').animate({ left: '+=' + $('#slider').width() }, 400, 'swing', function() { });
    $('.active').removeClass('active').prev().addClass('active');
    decount--;
    window.location.hash = decount;
    }
}

这会是解决方案吗？我不太擅长 jQuery，所以我不知道如何将它添加到我目前拥有的代码中......

Answer 1

我认为您正在寻找的是 jQuery animate