使用fadeIn无法正确显示jQuery文本

我搜索了这个问题，但找不到对我有用的解决方案。

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

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