Ajout d'un code de fondu JQuery?

Question

J'ai deux colonnes gauche et droite, la colonne de droite est pour une section appelée catégories et quand je clique sur une catégorie, elle ouvre (bascule) cette catégorie et ferme la précédente dans la colonne de gauche.

Tout fonctionne très bien, je me demandais si quelqu'un savait comment ajouter fondu dans l'effet de fondu en cliquant sur une catégorie (lien)?

Heres mon code 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

fonctions

Votre peau()/show() a obtenu l'option "lent" pour ajouter l'effet de fondu.

Essayez ceci dans votre code jQuery('.tab-content ' + currentAttrValue).show("slow").siblings().hide("slow");

Vive

Answer 2

Vous devez mettre la propriété transition dans les règles CSS pour les autres états:

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

J'écris 1 second pour montrer l'effet. Voir travailler:

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

fois suivante, utilisez stacksnippets, en ce qui ne nécessitent pas de ressources externes, ni inscrire dans les différents services.

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>