jQuery text not showing properly using fadeIn

问题

I searched for this problem but couldn't find solution that works for me.

I'm trying to do four checkboxes, from which only three can be selected. And when fourth checkbox is selected there is a faded in message, which informs the user about the limit. This is the part that fades in the text:

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

I couldn't do it with a delay, so I used setTimeout. I can't understand why the first time the fourth checkbox is clicked, the message shows uo instantly. What am I doing wrong?

And also is there a way to do it with a delay instead of setTimer?

Here is a link to the whole code: http://jsfiddle.net/e5kns/

回答1:

Try adding this to the start of the script:

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

回答2:

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

Use fadeTo and set css opacity to 0... like this:

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

来源：https://stackoverflow.com/questions/11442357/jquery-text-not-showing-properly-using-fadein