在兩個方向動畫滾動

Question

你好傢伙我有一個列表，其中有一個錨標籤。點擊它的選項通過應用CSS來突出顯示。

的問題是，我想製作動畫一樣，如果默認的選項是在option1，當我點擊option4它應該有一個滾動效果，然後去選擇4和運用它，對CSS的作用這是選項4的方式，選項1和選項4之間的所有選項都應該動畫一秒或半秒。反之亦然。

HTML

<ul style="list-style-type:none" id="freeddom" class="idTabs"> 
    <li><h5><strong>about us</strong></h5></li> 
    <hr class="aboutUs-line"/> 
    <br/> 
    <li id="our_Story_det" ><a href="#option1" class="selected"><span>| &nbsp;</span> op1</a></li> 
    <br/> 
    <li><a href="#prime_Choice" class="option2"><h6>op2</h6></a></li> 
    <li><a href="#prime_Differece" class="option3"><h6>op3</h6></a></li> 
    <li><a href="#prime_Differece" class="option4"><h6>op4</h6></a></li> 
</ul> 

<div id="option1"> Hello option1</div> 
<div id="option2">helloo option2</div> 
<div id="option3">option3 </div> 
<div id="option4">option4 </div> 

CSS

ul#freeddom li a.selected h6 { 
    color: white!important; 
    margin-left: 4px; 
    background: black; 
    /*border-left: 1px solid white;*/ 
} 

一件事我使用idTabs jQuery插件選項卡和IR適用選擇類當前活動的選項，但該類別沒有任何影響

Answer 1

這是一個非常基本的標籤widg等着你要找的動畫。當然，你需要用你的風格等來定製它。但它絕對是一個開始。

var tabsWidth; 
 
var content = $('.content-inner').width(function() { 
 
    var elm = $(this); 
 
    tabsWidth = elm.width(); 
 
    return elm.children().length * tabsWidth; 
 
}); 
 

 
setTimeout(function(){ 
 
    content.css('transition', 'all .3s ease'); 
 
}); 
 

 
var tabs = $('.idTabs li').click(function(){ 
 
    var elm = $(this), 
 
     index = tabs.index(elm); 
 
    
 
    content.css('transform', 'translateX(' + -(index * tabsWidth) + 'px)') 
 
});

* { 
 
    box-sizing:border-box; 
 
} 
 

 
.idTabs { 
 
    margin:0; 
 
    padding:0; 
 
    list-style-type:none; 
 
    position:relative; 
 
    z-index:1; 
 
} 
 

 
.idTabs li { 
 
    display:inline-block; 
 
    padding:5px 10px; 
 
    border:1px solid #000; 
 
    border-bottom-color:#fff; 
 
    background:#fff; 
 
    margin-bottom:-1px; 
 
    cursor:pointer; 
 
} 
 

 
.content { 
 
    border:1px solid; 
 
    position:relative; 
 
    overflow-x:hidden; 
 
    background:#fff; 
 
} 
 

 
.content-inner { 
 
    display:table; 
 
    table-layout:fixed; 
 
    width:100%; 
 
} 
 

 
.content .tab { 
 
    display:table-cell; 
 
    padding:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul id="freeddom" class="idTabs"> 
 
    <li>about us</li> 
 
    <li class="selected">tab1</li> 
 
    <li>op2</li> 
 
    <li>op3</li> 
 
    <li>op4</li> 
 
</ul> 
 
<div class="content"> 
 
    <div class="content-inner"> 
 
    <div id="option1" class="tab">About us</div> 
 
    <div id="option2" class="tab">Hello option1</div> 
 
    <div id="option3" class="tab">helloo option2</div> 
 
    <div id="option4" class="tab">option3 </div> 
 
    <div id="option5" class="tab">option4 </div> 
 
    </div> 
 
</div>

http://jsbin.com/vaguka/edit?html,css,js