fadeIn在fadeOut的回调中被调用，它们在某些项目上闪烁还是两次? [英] fadeIn called in callback of fadeOut blinking or occurring twice on certain items?

问题描述

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

I am using a select form element to show different days for a schedule. For some reason, the third and fourth days are blinking when chosen and I'm not sure why. And if the third or fourth days are selected, it causes other days to blink when chosen.

此处提供示例: 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();
    });
});

推荐答案

似乎是与计时相关的问题.使用#schedule > div作为选择器会导致所有div逐渐淡出，然后每个都触发div的fadeIn.对于最直接的解决方案，我可能会缓存掉当前选定的div，然后使用它淡出(仅淡出一个而不是全部淡出):

Seems to be a timing related issue. Using #schedule > div as your selector causes all divs to start fading out, and then each triggering the fadeIn of the div. For the most straightforward solution, I'd probably just cache off the currently selected div and then use that to fade out (only fade out one rather than all of them):

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

在此处拨弄

Fiddle here

这篇关于fadeIn在fadeOut的回调中被调用，它们在某些项目上闪烁还是两次?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！