JQueryフェードコードを追加していますか？

Question

私は2つの列を左右に持っています。右の列はカテゴリと呼ばれるセクションのためのものです。カテゴリをクリックすると、そのカテゴリを開き（トグル）、前の列を閉じます。

これはすべてうまくいきます。カテゴリー（リンク）をクリックしたときにフェードアウト効果を追加する方法を誰かが知っていたのでしょうか？

HERESに私のjQueryコード：

jQuery('.tab-links a').on('click', function(e) { 
    var currentAttrValue = jQuery(this).attr('href'); 

    // Show/Hide Tabs 
    jQuery('.tab-content ' + currentAttrValue).show().siblings().hide(); 

    // Change/remove current tab to active 
    jQuery(this).parent('li').addClass('active').siblings().removeClass('active'); 

    e.preventDefault(); 
}); 

Answer 1

あなたの非表示（）/ショー（）関数は、フェード効果を追加する "遅い" オプションを得ました。

.tab-links a { 
    transition:all linear 1s; 
} 

.tab-links a:hover { 
    transition:all linear 1s; 
} 

li.active a, li.active a:hover { 
    transition:all linear 1s; 
} 

私は効果を示すため1 secondを書く：

は、あなたが他の州のためのCSSルールでtransitionプロパティを配置する必要がありますjQuery('.tab-content ' + currentAttrValue).show("slow").siblings().hide("slow");

乾杯

Answer 2

あなたのコードでこれを試してみてください。作業それを参照してください。

http://codepen.io/anon/pen/grxzQa

次回は、限り外部のリソースを必要とも異なるサービスに登録していないとして、stacksnippetsを使用しています。

jQuery('.tab-links a').on('click', function(e) { 
 
    var currentAttrValue = jQuery(this).attr('href'); 
 

 
    // Show/Hide Tabs 
 
    jQuery('.tab-content ' + currentAttrValue).show().siblings().hide(); 
 

 
    // Change/remove current tab to active 
 
    jQuery(this).parent('li').addClass('active').siblings().removeClass('active'); 
 

 
    e.preventDefault(); 
 
});

.tab-links a { 
 
    padding:9px 15px; 
 
    display:inline-block; 
 
    border-radius:3px 3px 0px 0px; 
 
    background:#7FB5DA; 
 
    font-size:16px; 
 
    font-weight:600; 
 
    color:#4c4c4c; 
 
    transition:all linear 1s; 
 
} 
 

 
.tab-links a:hover { 
 
    background:#a7cce5; 
 
    text-decoration:none; 
 
    transition:all linear 1s; 
 
} 
 

 
li.active a, li.active a:hover { 
 
    background:#fff; 
 
    color:#4c4c4c; 
 
    transition:all linear 1s; 
 
} 
 

 
/*----- Content of Tabs -----*/ 
 

 
.tab { 
 
    display:none; 
 
} 
 

 
.tab.active { 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<ul class="tab-links"> 
 
    <li class="active"><a href="#tab1">Tab #1</a></li> 
 
    <li><a href="#tab2">Tab #2</a></li> 
 
    <li><a href="#tab3">Tab #3</a></li> 
 
    <li><a href="#tab4">Tab #4</a></li> 
 
</ul> 
 

 
<div class="tab-content"> 
 
    <div id="tab1" class="tab active"> 
 
    <p>Tab #1 content goes here!</p> 
 
    <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</p> 
 
    </div> 
 

 
    <div id="tab2" class="tab"> 
 
    <p>Tab #2 content goes here!</p> 
 
    <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p> 
 
    </div> 
 

 
    <div id="tab3" class="tab"> 
 
    <p>Tab #3 content goes here!</p> 
 
    <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p> 
 
    </div> 
 

 
    <div id="tab4" class="tab"> 
 
    <p>Tab #4 content goes here!</p> 
 
    <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p> 
 
    </div> 
 
</div>