javascript - 使用淡入淡出无法正确显示 jQuery 文本

Question

我搜索了这个问题，但找不到适合我的解决方案。

我正在尝试做四个复选框，从中只能选择三个。当第四个复选框被选中时，会出现一条淡入消息，通知用户有关限制的信息。这是文本中淡出的部分：

$('#warning').fadeIn('slow',function() {
        $(this).stop().text("(You can't have more than 3 selected options)");
        setTimeout(function() {
            $("#warning").fadeOut(300);
        }, 2500);
});

我不能延迟，所以我使用了 setTimeout。我不明白为什么第一次单击第四个复选框时，消息立即显示 uo。我究竟做错了什么？

还有一种方法可以延迟而不是 setTimer 吗？

这是整个代码的链接：http: //jsfiddle.net/e5kns/

Answer 1

尝试将此添加到脚本的开头：

$('#warning').text("(You can't have more than 3 selected options)");
$('#warning').show();
$('#warning').hide();

Answer 2

http://jsfiddle.net/e5kns/2/

使用 fadeTo 并将 css opacity 设置为 0... 像这样：

$('#warning').text("(You can't have more than 3 selected options)").css('opacity',0).stop().fadeTo('slow', 1).delay(2000).fadeTo('slow', 0);