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

发布于 2024-11-03 08:18:03 字数 1251 浏览 3 评论 0原文

我正在使用 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();
    });
});

原文

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.

Example available here:
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();
    });
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

差↓一点笑了 2024-11-10 08:18:03

似乎是一个与时间相关的问题。使用#schedule> div 作为选择器会导致所有 div 开始淡出，然后每个 div 都会触发 div 的 fadeIn。而不是全部）：

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

对于最简单的解决方案，我可能只是缓存当前选定的 div，然后使用它淡出（仅淡出一个 net/dbrecht/HVsFu/" rel="nofollow">在这里摆弄

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

回复收藏 0 原文

夜司空 2024-11-10 08:18:03

$('#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/

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