Comment modifier l'interface à onglets?

Question

J'ai lu un tutoriel décrivant la création de simples onglets: http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/ Mais je veux le modifier, et je ne peux pas obtenir le résultat souhaité, et ce résultat peut être vu à un modèle: http://themeforest.net/item/maven-portfolio-wordpress/49522?no_login=true (Cliquez simplement sur 'Live Preview')

donc, je veux un contenu: 1. slideUp() et fadeOut() simultanément 2. slideDown() et fadeIn() en même temps

J'ai trouvé un article intéressant sur un sujet: http://www.learningjquery.com/2008/02/simple-effects-plugins Mais encore , comme je l'ai dit, je ne sais pas comment faire ça.

Le code que j'utilise maintenant:

(function($) { 
    $.fn.slideFadeToggle = function(speed, easing, callback) { 
     return this.animate({ 
      opacity: 'toggle', 
      height: 'toggle', 
     }, speed, easing, callback); 
    } 
})(jQuery) 



$(function() { 
    $('.tab-content').hide(); 
    $('ul.tabs li:first').addClass('active'); 
    $('.tab-content:first').show(); 

    $('ul.tabs li a').click(function() { 
     $("ul.tabs li").removeClass("active"); 
     $(this).parent().addClass('active'); 
     $('.tab-content').hide(); 
     var href = $(this).attr('href'); 
     $(href).slideFadeToggle('slow'); 
     return false;  
    }); 
}); 

Merci beaucoup, si vous pouvez me aider))

Answer 1

Essayez ceci:

(function($) { 
    $.fn.slideFadeToggle = function(speed, easing, callback) { 
     return this.animate({ 
      opacity: 'toggle', 
      height: 'toggle', 
     }, speed, easing, callback); 
    } 
})(jQuery) 
$(document).ready(function() { 
    $('.tab-content').hide(); 
    $('ul.tabs li:first').addClass('active'); 
    $('.tab-content:first').addClass('active').show(); 

    $('ul.tabs li').click(function() { 
     $("ul.tabs li").removeClass("active"); 
     $(this).addClass('active'); 
     var activeTab = $(this).find("a").attr("href"); 
     $('.tab-content.active').removeClass('active').slideFadeToggle('slow',function(){ 
      $(activeTab).addClass('active').slideFadeToggle('slow',function(){}); 
     }); 
     return false; 
    }); 
}); 

Votre code encore appelait

$('.tab-content').hide(); 

qui cache tout avant même d'animer quoi que ce soit. Vous avez également besoin d'utiliser la fonction de rappel. Ce qui signifie que vous appelez l'animation sur le contenu de l'onglet actif et quand c'est fait, vous l'appelez sur le nouveau contenu actif.

Pour tout travailler avec l'exemple d'origine que vous travaillez hors du départ http://jsbin.com/egohi