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/