タブ付きインターフェイスを変更する方法は？

Question

私は簡単なタブの作成について説明したチュートリアルを読んだ：http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/ しかし、私はそれを修正したい、そして望む結果を得ることができず、その結果は1つのテンプレートで見ることができる：http://themeforest.net/item/maven-portfolio-wordpress/49522?no_login=true （ 'Live Preview'をクリックするだけ）同時に 1. slideUp（）やフェードアウト（）を同時に 2. slideDown（）とフェードイン（）

私が主題についての興味深い記事を見つけました：：だから

、私はコンテンツが欲しいhttp://www.learningjquery.com/2008/02/simple-effects-plugins しかし、まだ私が言ったように、私はそれをする方法を知らない。

私が今使っコード：あなたは私を助けることができる場合

(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;  
    }); 
}); 

は、どうもありがとうございました））

Answer 1

これを試してみてください：

(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; 
    }); 
}); 

あなたのコードはまだ

を呼んでいました

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

あなたが何かをアニメーション化する前に。また、コールバック機能を使用する必要がありました。つまり、アクティブなタブのコンテンツでアニメーションを呼び出すと、新しいアクティブなコンテンツでアニメーションを呼び出すことになります。あなたがチェックアウトhttp://jsbin.com/egohi