text animation problems

text animation problems

I'm animating some link text to get larger when you hover over it, but there are two things 
about the animation  that I'd like to change.  First, the movement is jerky; the letters seem
to rock back and forth a bit as they grow.  The second is that the expansion is downward from the original position; the center of the word moves downward as it gets larger. I'd rather the movement was upward, or centered the same as the original.  Any suggestions would be most welcome.   Here's what I'm using:


<style>
a#enter {
    display:block;
    text-align:center;
    margin-left:420px;
    color:red;
    font: 24px "Lucida Handwriting", Comic Sans MS,  sans-serif; */
    border:0px solid green;
}
</style>
  .
  .

<body>

<a id="enter" href="page1.html">Enter</a>

<script>
$('a#enter').hover(
  function () {
    $(this).animate({fontSize: "36px"}, 200, "linear");  

  }, 
  function () {
    $(this).animate({fontSize: "24px"}, 200, "linear");
  }
);
</script>


Thanks for any ideas

    • Topic Participants

    • stva