Javascript 多个日期滑块的淡入淡出效果

我在我的项目中使用，使用户可以选择航班日期。下面是一个例子：。
如果我使用多个滑块，但没有任何效果，那么效果会非常好。但是，当我试图为这些元素启用fadeIn/fadeOut时，它是错误的。我复制了这一期。
HTML:

<button id="text">Show second slider</button>
<div id="first">
    <div id="slider1"></div>
</div>
<div id="second"  style="display:none;">
    <div id="slider2"></div>
</div>

---

第二个滑块不希望使用标尺以正确的格式显示。有什么想法吗？

当第二个滑块的初始化在

fadeOut（）的回调中完成时，它对我有效。

：但无法解释原因。。。

var el = document.getElementById("text");
el.onclick = function(){$('#first').fadeOut('slow', function(){$('#second').fadeIn('slow');});};
$("#slider1").dateRangeSlider({   
bounds: {
    min: new Date(2012, 0, 1),
    max: new Date(2012, 11, 31, 12, 59, 59)
},
defaultValues: {
    min: new Date(2012, 1, 10),
    max: new Date(2012, 4, 22)
}
});
$("#slider2").dateRangeSlider({   
bounds: {
    min: new Date(2012, 0, 1),
    max: new Date(2012, 11, 31, 12, 59, 59)
},
defaultValues: {
    min: new Date(2012, 1, 10),
    max: new Date(2012, 4, 22)
}
});