CODEWITHSUNDEEP
javascriptjquerydelayfadeinfadeout
Ziik
Ziik

Reputation: 1049

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/

Upvotes: 2

Views: 229

Answers (2)

Miro
Miro

Reputation: 8650

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);

Upvotes: 0

PriestVallon
PriestVallon

Reputation: 1518

Try adding this to the start of the script:

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

Upvotes: 1

Related Questions