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:

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

Code JavaScript:
$(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.