jQuery show（）和hide（）不起作用

Question

我正在将旧问题滑动到左侧，并从右侧滑入新问题。你可以看到我在这的jsfiddle正在做：

jsFiddle

$(document).ready(function() { 
    //$('ul').roundabout(); 
    $("#question2").hide(); 
    $("#question3").hide(); 

    var x = 1; 
    $("input[type='radio']").change(function() { 
     var selection = $(this).val(); 
     //alert("Radio button selection changed. Selected: " + selection); 
     $("#question" + x).hide("slide", { 
      direction: "left" 
     }, 800); 
     x++; 
     $("#question" + x).show("slide", { 
      direction: "right" 
     }, 800); 
    }); 
}); 

但是，当我工作的jsfiddle之外（主要是因为它会无法正确加载从GitHub上的roundabout.js文件）我似乎无法让show（）和hide（）正常工作。我有完全相同的代码（对roundabout.js的引用没有注释），它会完全忽略第一个隐藏和显示引用，然后跳过下一个隐藏命令并显示下一个问题。

为什么它不会触发click事件中的hide（）和show（）函数？

编辑：用最新的jsFiddle编辑。它在那里工作，但不在该环境之外。

Answer 1

绑定的DOM ready事件

如果检查中的jsfiddle源，你看所有的code enclosed in the DOM ready event内的事件。所以它看起来像在这里工作，而不是在你的本地版本。

$(document).ready(function() { 
    //$('ul').roundabout(); 
    $("#question2").hide(); 
    $("#question3").hide(); 

    var x = 1; 
    $("input[type='radio']").change(function() { 
     var selection = $(this).val(); 
     //alert("Radio button selection changed. Selected: " + selection); 
     $("#question" + x).hide("slide", { 
      direction: "left" 
     }, 800); 
     x++; 
     $("#question" + x).show("slide", { 
      direction: "right" 
     }, 800); 
    }); 

}); 

Answer 2

这种方法不使用jQuery UI，也不同于你的，但你仍然会得到相同的最终结果。请注意，HTML/CSS在这种方法中也有所不同。

工作示例：JSFiddle。

$(document).ready(function() { 

    var x = 1, 
     distance = $('.container').width(), 
     qNumber = $('.question').length; 

    $('.questionList').width(distance*qNumber); 

    $("input[type='radio']").change(function() { 

     alert("Radio button selection changed. Selected: " + $(this).val()); 
     $('.questionList').animate({'margin-left':'-='+distance+'px'}, 500); 

    }); 

});