在两个方向动画滚动

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