Hinzufügen von JQuery-Fade-Code?

Question

Ich habe zwei Spalten links und rechts, die rechte Spalte ist für einen Abschnitt namens Kategorien, und wenn ich auf eine Kategorie klicke, öffnet (schaltet) diese Kategorie und schließt die vorherige Spalte in der linken Spalte.

Es funktioniert alles gut, ich fragte mich, ob jemand wusste, wie Fade in Fade-Out-Effekt hinzufügen, wenn Sie auf eine Kategorie (Link) klicken?

Heres mein JQuery-Code:

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

Ihre hide()/show() Funktionen bekam die "langsamen" Option, um die Fade-Effekt hinzuzufügen.

Versuchen Sie dies in Ihrem Code jQuery('.tab-content ' + currentAttrValue).show("slow").siblings().hide("slow");

Prost

Answer 2

Sie müssen die transition Eigenschaft in den CSS-Regeln für die anderen Staaten zu setzen:

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

ich 1 second schreiben die Wirkung zu zeigen. Sehen Sie es Arbeit:

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

Das nächste Mal, Verwendung stacksnippets, soweit keine externen Ressourcen erfordern noch in verschiedenen Dienste registrieren.

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>