將電流標籤滑到左側，從右側滑入下一個標籤

我試過找到我的問題的答案，但沒有成功。我發現這個例如：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的，所以我不知道如何將它添加到我目前擁有的代碼..

來源

2014-01-12 framecontrol

我想你要找的是什麼jQuery animate

來源

2014-01-12 15:45:55 artdias90

感謝@ artdias90，但我對於jQuery來說是全新的，所以我不明白你建議的鏈接。你能根據我的代碼創建一個示例代碼嗎？ – framecontrol

我在JSFiddle中玩過一段時間，但沒有成功。試圖從我的問題中鏈接到的stackoverflow文章添加jQuery代碼。你可以在這裏找到它：http://jsfiddle.net/s8zMy/ - 請看一看，看看有什麼不對 – framecontrol

將電流標籤滑到左側，從右側滑入下一個標籤

回答

相關問題