両方向にスクロールアニメーション

Question

こんにちは、私は、アンカータブがあるリストがあります。クリックされたオプションは、CSSを適用することによって強調表示されます。

問題は、デフォルトではオプションがoption1の場合と同じですが、option4をクリックするとスクロール効果があり、オプション4に移動してCSS効果を適用する必要がありますそれはオプション4に向いています。オプション1とオプション4の間にあるすべてのオプションは、2秒半のようにアニメートする必要があります。およびその逆。

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

これは非常に基本的なタブウィジットですあなたが探しているアニメーションと一緒に。もちろん、スタイルなどでカスタマイズする必要がありますが、間違いなくスタートです。

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