Grow your CSS skills. Land your dream job.

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.

    http://jsfiddle.net/c9BZB/

    # May 19, 2013 at 11:01 pm

    Because it’s technically already showing. It needs to have `display: none;` on page load: http://jsfiddle.net/c9BZB/1/

    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

    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](http://jsfiddle.net/Mottie/c9BZB/2/)):

    $(function () {
    var $field = $(‘#field’),
    nul = 0,
    min = 8,
    max = 32,
    $h4 = $(‘h4′),
    showMessage = function (msg) {
    $h4
    .hide()
    .stop(true, true)
    .text(msg)
    .fadeIn(200)
    .delay(1200)
    .fadeOut(200);
    };

    $(‘#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.

*May or may not contain any actual "CSS" or "Tricks".