Добавление кода jadele jQuery?

Question

У меня есть два столбца влево и вправо, правый столбец предназначен для раздела, называемого категориями, и когда я нажимаю категорию, которая открывается (переключает) эту категорию и закрывает предыдущую в левом столбце.

Все работает отлично, мне было интересно, если кто-нибудь знает, как добавить эффект затухания в эффект выцветания при нажатии на категорию (ссылку)?

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

Ваш шкура()/шоу() функции у "медленных", чтобы добавить эффект замирания.

Попробуйте это в вашем коде jQuery('.tab-content ' + currentAttrValue).show("slow").siblings().hide("slow");

Приветствия

Answer 2

Вы должны поставить transition свойство в правилах CSS для других государств:

.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, чтобы показать эффект. Смотрите это работает:

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>