The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

jQuery fadeIn text, delay, and fadeOut text bug

  • # May 19, 2013 at 10:21 pm

    Okay, so everything works the way I want it, but when you first click the button, there is no fadeIn effect to the “there is no password!” text, but there is a fadeOut, and delay effect. But, if you click the button a second time, there is a fadeIn effect to the “there is no password!” text. I don’t know why there’s no fadeIn effect when you first click the button.

    # May 19, 2013 at 11:01 pm

    Because it’s technically already showing. It needs to have `display: none;` on page load:

    Having said that, it’s probably not a very good idea to remove an error message after a certain period of time.

    # May 19, 2013 at 11:09 pm

    This reply has been reported for inappropriate content.

    Hmm, that is acting very oddly. I ended up just using a .hide() first because for me even with the display:none @TheDoc suggested, it wasn’t working – the “Enter a password” section didn’t even have a fadeIn().

    Anyway here is how I would clean up that code (demo):

    $(function () {
    var $field = $(‘#field’),
    nul = 0,
    min = 8,
    max = 32,
    $h4 = $(‘h4’),
    showMessage = function (msg) {
    .stop(true, true)

    $(‘#btn’).click(function () {
    var val = $field.val();
    if (val.length < min) {
    showMessage(‘Password is too short!’);

    if (val.length > max) {
    showMessage(‘Password is too long!’);

    if (val.length == nul) {
    showMessage(‘Enter in a password!’);


    # May 19, 2013 at 11:33 pm

    Thanks guys, I see my error.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed