Jquery fadeIn在淡出回调中调用，在某些项目上闪烁或出现两次？

我使用

select

form元素来显示日程安排的不同日期。出于某种原因，第三天和第四天在被选中时会闪烁，我不知道为什么。如果选择了第三天或第四天，则会导致其他日子在选择时闪烁

示例如下：

HTML:

JS:

---

检查处的工作示例似乎是一个与时间相关的问题。使用

#schedule>div

作为选择器会导致所有div开始淡出，然后每个div都会触发div的

fadeIn

。对于最简单的解决方案，我可能只是缓存掉当前选择的div，然后使用它淡出（只淡出一个而不是全部）：

<select id="date-select" name="date">
    <option value="day1" selected="selected">Thursday</option>
    <option value="day2">Friday</option>
    <option value="day3">Saturday</option>
    <option value="day4">Sunday</option>
</select>

<div id="schedule">
    <div id="day1"><img src="http://placehold.it/350x150"></div>
    <div id="day2"><img src="http://placehold.it/350x150/ff00000"></div>
    <div id="day3"><img src="http://placehold.it/350x150/37FDFC"></div>
    <div id="day4"><img src="http://placehold.it/350x150/FFC125"></div>
</div>

#day2, #day3, #day4 {
    display: none;
}

$('#date-select').change(function() {
    var newDay = $(this).val();
    $("#schedule > div").fadeOut(200,function() {
        $("#schedule #"+newDay).fadeIn();
    });
});

$('#date-select').change(function() {
    var newDay = $(this).val();
    $("#schedule").find('div:visible').fadeOut(200).end().find("#"+newDay).delay(200).fadeIn(200);
});

var sel = $('#day1');
$('#date-select').change(function() {
    var newDay = $(this).val();
    $(sel).fadeOut(200,function() {
        $("#schedule #"+newDay).fadeIn(function(){
            sel = this;
        });
    });
});