RJS problem makeing text appear and grow seamlessly

I have some questions on RJS/AJAX. I want some text to appear on the
screen and grow larger. The main problem I have is that if I set the
text size to 60 and then use the grow effect, it flashes on the screen
as large text for a split second, then disappears and then grows from
small to large. I don't want that split second flashing to occur. Also,
it would be nice if I didn't have to have a click on enter to start the
effect, but it would start up immediately. I'm guessing I may have to
define my own javascript temnplate ?

Here is what I have tried:

<%= javascript_include_tag :defaults %>

<div id="hdr" style="visibility:hidden;font-size:1">

<%= link_to_remote "ENTER", :url => {:action => "enter" }%>

class MainController < ApplicationController

  def enter
  render :update do |page|
   page[:hdr].set_style :'visibility' => 'visible'
    h = :hdr
    page[h].set_style :'font-size' => 60
    page[h].set_style :'color' => "blue"
   page[h].visual_effect :grow, :duration => 5

it appears that the request you are doing is only to have some
javascript effects run on the client. if that i the case, there is no
need to even make a request to the server, just use link_to_function.

i recommend you use display:none vs visiblity:hidden unless there is a
specific reason for using the visiblity style. you're also need to
quantify your font-size, ie, px, em, etc.

<div id="hdr" style="display:none;font-size:1px;color:blue">
<%= link_to_function "ENTER", "show_and_grow('hdr')" -%>

<script type="text/javascript">
function show_and_grow(elem_id) {
  Element.setStyle(elem_id, { 'font-size':'60px' })
  new Effect.Grow(elem_id);