jQuery fadeToggleを含めるためにスクリプトを表示/非表示にする

Question

ラジオボタンのクリックに基づいてdivを表示または非表示にするオンラインのスクリプトがあります。

私はfadeToggle（）またはslideToggle（）をトランジションに追加することでこれを改善しようとしています。しかし、私がこれを行うとき、関数は以前と同じように機能しません。 もう一方のラジオボタンをクリックすると、両方のdivが表示され、両方の表示が再び非表示になります。

// Show/Hide forms based on radio button selection 
$('input[name="screen_type"]').bind('change',function(){ 
var showOrHide = ($(this).val() == 2) ? true : false; 
$('.welcome_screen').toggle(showOrHide); 
    var showOrHide = ($(this).val() == 1) ? true : false; 
$('.training_screen').toggle(showOrHide); 
}); 

ここだすべてのヘルプみんな、歓声

Answer 1

fadeToggleとslideToggleため http://jsfiddle.net/clintongreen/JEbFq/

おかげでapi doc

を表示または非表示にするには、パラメータを取ることはありませんここでフィドルを参照してください。すばやく汚い代わりにそれを行う方法：http://jsfiddle.net/hzSnU/1/

Answer 2

方法は次のとおりです。http://jsfiddle.net/JEbFq/20/

Answer 3

あなたはこのような何か行うことができます：

// Hide lis 
    $(".training_screen").hide(); 
    $(".welcome_screen").hide();  

// Show/Hide forms based on radio button selection 
    $('input[name="screen_type"]').bind('change',function(){ 
     var fnTraining, fnWelcome; 
     if ($(this).val() == 1) { 
      fnTraining = "slideDown"; 
      fnWelcome = "slideUp"; 
     } else { 
      fnTraining = "slideUp"; 
      fnWelcome = "slideDown"; 
     } 
     $('.welcome_screen')[fnWelcome](); 
     $('.training_screen')[fnTraining](); 
});​ 

の作業のデモ：http://jsfiddle.net/jfriend00/4aSbG/

か、をあなたが表示/非表示パラメータを取るslideToggleOption jQueryのメソッドを作るなど、それを使用することができますこの：

// Hide lis 
    $(".training_screen").hide(); 
    $(".welcome_screen").hide();  

jQuery.fn.slideToggleOption = function(show /* other optional args from slideToggle */) { 
    var args = Array.prototype.slice.call(arguments, 1); 
    if (show) { 
     return(this.slideDown.apply(this, args)); 
    } else { 
     return(this.slideUp.apply(this, args)); 
    } 
}; 

// Show/Hide forms based on radio button selection 
    $('input[name="screen_type"]').bind('change',function(){ 
     var showWelcome = ($(this).val() == 1); 
     $('.welcome_screen').slideToggleOption(showWelcome); 
     $('.training_screen').slideToggleOption(!showWelcome); 
});​ 

の作業のデモ：http://jsfiddle.net/jfriend00/Lqeqe/