CODEWITHSUNDEEP
jqueryfadeout
danyo
danyo

Reputation: 5856

jquery display inline-block then fade

I have the following jQuery:

$('#register_email_address').siblings('.error').css('display','inline-block');

I would like the above to fadeOut after so many seconds.

I have tried the following:

$('#register_email_address').siblings('.error').css('display','inline-block').fadeOut(3000);

But this doesnt seem to work?

Any ideas?

Cheers, Dan

The above code if for form validation. onBlur of any input field the above is initiated, the show the class .error. is then shown. This then displays, and stays displayed.

the .error class contains another classs of .showerror. This is the class i would actually like to fadeOut after so long.

Upvotes: 1

Views: 411

Answers (2)

A. Wolff
A. Wolff

Reputation: 74420

Try:

$('#register_email_address').siblings('.error').css('display','inline-block').delay(3000).fadeOut();

Upvotes: 2

johnkavanagh
johnkavanagh

Reputation: 4674

The reason your current code doesn't work is that the 3000 value you're using is being applied to the fadeOut (ie: the fade out animation is taking 3000 milliseconds).

There are a couple of options here, but personally I would use jQuery's .delay(), which is specifically used to cause a pause in processing a chain . Dropping this into your chain should - in theory - do exactly what you're after.

For example, this will cause a 3000 pause between setting the CSS, and fading the element back out:

$('#register_email_address').siblings('.error').css('display','inline-block').delay(3000).fadeOut();

Upvotes: 2

Related Questions