[jQuery] custom amimation problem

[robing]

Hello,

I wonder if someone can help shed some light on the problem i am
having?
i am trying to put together a very simple custom amimation but i just
can't get it to work so i am trying to get the example in the
documentation to work in place of my test and i still can't get it to
work.
i want to be able to click on the contact link on the naviagation and
have a <li> or div animate out to display an email address but i just
can't get the animation to work.

http://kristi.xtools.co.nz

  #contactAnimation {
      background-color:#bca;
    width:100px;
    border:1px solid green;
  }

<ul id="navigation">

<li id="about"><a href="/" title="about page">&nbsp;</a></li>
<li id="portfolio"><a href="/www/portfolio.htm" title="portfolio
page">&nbsp;</a></li>
<li id="contact"><a href="/www/contact.htm" title="contact
page">&nbsp;</a></li>
<li id="contactAnimation">hello</li>
</ul>

$("#contact").click(function(){
alert("hello");
$("#contactAnimation").animate({ width: "70%", opacity: 0.4,
marginLeft: "0.6in", fontSize: "3em", borderWidth: "10px" }, 1500 );
 return false;
 });