Here is my goal: I want to have my login form appear on the screen, after the link is clicked. It should then bounce on the screen ( the entire form ). The form is appearing, but the javascript function to bounce it is not working. Any help would be appreciated, im really only creating this so I can learn, but I don't understand why its not working.

The main file:
HTML Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
    
 });
function bounceLoginScreen()
{
      var $=jQuery();
      $('#finalDivBouncer').fadeIn(150).animate({top:"+=10px"},125).animate({top:"+=10px"},125).animate({top:"+=20px"},200).animate({top:"+=20px"},150).animate({top:"+=20px"},150).animate({top:"+=20px"},150).animate({top:"-=20px"},150).animate({top:"+=20px"},150).animate({top:"-=20px"},150);
      alert("should have bounced");
}
  

//START: AJAX
var xmlhttp;
function showUser(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="getLoginBox.php";
//url=url+"?q="+str;
//url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged()
{
if (xmlhttp.readyState==4)
{
//document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
spillTheBeans2('finalDivBouncer', xmlhttp.responseText);
bounceLoginScreen();

}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}
//END: AJAX


function spillTheBeans2(cont, textToChange)
{
  var newdiv = document.createElement("div");
  newdiv.innerHTML = textToChange;
  newdiv.id = "finalDivBouncer";
  var container = document.getElementById(cont);
  var parentDiv = container.parentNode;
  parentDiv.replaceChild(newdiv, container); 
}

</script>

</head>
<body>

  <div id = "finalDivBouncer">
  <b>Old div text.</b>
  </div>
<a href = "#" onClick = "showUser('');"> link</a>

</body>

</html>
The form file:

HTML Code:
<div>
User Name : <input name="username" type="text" id="username" value="" maxlength="20" />
</div>
<div style="margin-top:5px" >
Password :
&nbsp;&nbsp;
<input name="password" type="password" id="password" value="" maxlength="20" />
</div>
<div>
<input name="Submit" type="submit" id="submit" value="Login" style="margin-left:-10px; height:23px"  /> <span id="msgbox" style="display:none"></span>
</div>
The backend:

HTML Code:
<?php
$myFile = "loginBox.html";
$fh = fopen($myFile, 'r');
$theData = fread($fh, filesize($myFile));
fclose($fh);
echo $theData;
?>