span displays on next line while calling show('slow') method

span displays on next line while calling show('slow') method


Hi,
I am working on validation controls. I want to put some animation
effects when the error message gets displayed. Following is the html
page along with the script. My problem is whenever the message gets
displayed it appears on the next line. I figured that "show" method of
Jquery applies "display:block" on span element due to which it appears
on the next line. I want to display the message in same line as the
control on which it fires.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#spn').hide();
$('#btn').click(function() {
$('#spn').show('slow');
});
});
</script>
</head>
<body>
<div>
<input type="text"/><span><span id="spn">Hi</span></span>
<input type="button" value="click me" id="btn" />
</div>
</body>
</html>
Thanks in advance.
PS: I am trying to extend ASP.net validation controls with this
behavior. Validation controls rendered as "span" element.
- Raxit