jQuery: slideDown Not Working

I am just starting out teaching myself jQuery (bought the ninja book yesterday) and I’d appreciate any help with this script I’m trying to write…

I want to have a form asking the user for a number and then slide in a message underneath the form based on the number they’ve entered.

Here is my lame failure of an attempt:


<div id="kyss">
	<!-- show if javascript is disabled -->
	<p id="kyss-ph-msg">Please enable JavaScript for this page to work properly.</p>
</div>


$(document).ready(function() {
	$('#kyss-ph-msg').hide();
	
	$('<input type="button" id="kyss-ph-submit" value="go" />').prependTo('#kyss');
	$('<input type="text" id="kyss-ph-value" />').prependTo('#kyss');
		
	$('#kyss-ph-submit').click(function() {			
		ph = Math.abs(parseFloat($('#kyss-ph-value').val()));
		ph = ph.toFixed(2);
			
		if (!isNaN(ph)) {
			if(ph < 6.3) {
				$('#kyss-ph-msg').replaceWith('<p id="kyss-ph-msg">Less than 6.3</p>');
			}
			if(ph >= 6.3 && ph < 7) {
				$('#kyss-ph-msg').replaceWith('<p id="kyss-ph-msg">Greater than or equal to 6.3 and less than 7</p>');
			}
			if(ph >= 7) {
				$('#kyss-ph-msg').replaceWith('<p id="kyss-ph-msg">Greater than or equal to 7</p>');
			}
		}
		$('#kyss-ph-msg').slideDown('slow');
	});
		
});

So, the script works, but it doesn’t animate the message. I don’t know why. Any ideas?

Thanks for your help.

That worked nicely. Thank you very much.

You’re replacing #kyss-ph-msg with a new one. The new one is visible by default, so slideDown() doesn’t do anything.

Instead of


$('#kyss-ph-msg').replaceWith('<p id="kyss-ph-msg">Greater than or equal to 7</p>');

you should do:


$('#kyss-ph-msg').text('Greater than or equal to 7');

(and of course also do this for all the others.)