MattKnowsTech

# 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/

TheDoc

# 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.

Mottie

# 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!’);
}

});
});

MattKnowsTech

# May 19, 2013 at 11:33 pm

Thanks guys, I see my error.