Fading Tabs avec Jquery

Question

J'utilise actuellement cette fonction pour ajouter et supprimer des classes qui montrent et masquent parfaitement mes onglets. Je voudrais développer ce sorte que le contenu fondu dans ...

Voici mon HTML

<ul id='tabs'> 
    <li class='current'> 
     <a class='tabLink' href='#'>Title</a> 
     <div class='tabInfo'> 
      <p>Text Description</p> 
     </div> 
    </li> 
    <li> 
     <a class='tabLink' href='#'>Title</a> 
     <div class='tabInfo'> 
      <p>Text Description</p> 
     </div> 
    </li> 
</ul> 

Et mon JS

$('a.tabLink').click(function(){ 
    $tabs.removeClass('current'); 
    $(this).parent().addClass('current'); 
}); 

ET CSS

#tabs { 
    clear: both; 
    position: relative; 
} 
a.tabLink { 
    color: #58585A; 
    display: block; 
    font-size: 13px; 
    padding: 3px 5px; 
} 
a.tabLink:hover { 
    color: #FFFFFF; 
} 
.tabInfo { 
    background: none repeat scroll 0 0 #000000; 
    color: #CCCCCC; 
    display: none; 
    font-size: 12px; 
    height: 176px; 
    padding: 15px; 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 300px; 
} 
.current .tabLink { 
    background: none repeat scroll 0 0 #000000; 
    color: #FFFFFF; 
    display: block; 
} 
.current .tabInfo { 
    display: block; 
} 

Answer 1

$('a.tabLink').click(function(){ 
    $tabs.removeClass('current'); 
    $(this).parent().addClass('current'); 
    $(this).parent().find('.tabInfo').fadeIn(); 
}); 

Si je comprends bien, vous voulez fondre le contenu. Si le contenu est caché, ce qui semble être le cas, l'utilisation d'un fadeIn() sur le tabInfo div serait approprié.

Answer 2

Cela dépend de l'apparence de votre CSS, mais cela pourrait fonctionner.

$('a.tabLink').click(function(){ 
     $(".tabInfo", $tabs) 
     .stop().fadeOut("slow", function() { //Fadeout old content 
      $tabs.removeClass('current'); 
      $(this).parent().addClass('current'); 
      $(this).next(".tabLink").fadeIn(); 
     }); 
}); 

Answer 3

Vous pouvez accomplir cela en chargeant la bibliothèque jQuery UI, et en ajoutant un second argument à votre addClass invokation, la durée de l'animation.

$('a.tabLink').click(function(){ 
    // the style effects will be applied over a period of one second 
    $tabs.removeClass('current',1000); 
    $(this).parent().addClass('current',1000); 
}); 

Voir aussi: the addClass page de la documentation jQuery UI.

Answer 4

$('a.tabLink').click(function(){ 
    $tabs.removeClass('current'); 
    $(this).parent().addClass('current'); 
    $(this).next().fadeIn() 
}); 

Answer 5

Au lieu d'ajouter le courant de classe au parent, vous aurez besoin de fondre dans le tabInfo approprié.

$('a.tabLink').click(function(e){ 
    $('.tabInfo').css('display','none'); 
    $(this).parent().find('.tabInfo').fadeIn(); 
});