JQuery fade kodu ekleniyor mu?

Question

İki sütun sağa ve sola, sağ sütun, kategoriler denen bir bölüm içindir ve bir kategoriye tıkladığımda, o kategoriyi açar (açar) ve soldaki sütundaki bir önceki sayfayı kapatır.

Her şey yolunda, bir kategori (bağlantı) tıklandığında fade efektinin nasıl ekleneceğini bilen herhangi biri var mı diye merak ediyordum?

İşte benim JQuery kodu:

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

Kişisel hide()/gösterme() işlevlerini solmaya efekti eklemek için "yavaş" seçeneği var.

diğer devletler için CSS kuralları transition özelliği koymak için kodunuzda jQuery('.tab-content ' + currentAttrValue).show("slow").siblings().hide("slow");

Şerefe

Answer 2

Sen gerekir bu deneyin:

.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; 
} 

ben etkisini göstermeye 1 second yazın. o çalışma Bkz:

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

Sonraki zaman, kullanım stacksnippets kadarıyla dış kaynak gerektirir ne de farklı hizmetlerde kayıt yok gibi.

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>