fadeIn在fadeOut回调中调用闪烁或在某些项目上发生两次？

Question

我使用select表单元素来显示计划的不同日期。由于某种原因，第三天和第四天在选择时闪烁，我不知道为什么。如果选择了第三天或第四天，则会在选择时导致其他日期闪烁。

此处提供的示例： http://jsfiddle.net/waffl/WBHQc/1/

HTML：

<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>

CSS：

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

JS：

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

Answer 1

似乎是与时间相关的问题。使用#schedule > div作为选择器会导致所有div开始淡出，然后每个触发div的fadeIn。对于最简单的解决方案，我可能只是缓存当前选中的div然后使用它淡出（只淡出一个而不是全部）：

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

Fiddle here

Answer 2

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

检查http://jsfiddle.net/MNXvK/1/

处的工作示例