Topic: blind down

Hi,

Usually the blind down displays the content of an element as it's blinding down, if you see what I mean. When I apply it to the following code though, the content doesn't display until a jerk at the end.


RHTML

<%= link_to_remote "categories and links", 
:url =>> { :action =>> "categories_and_links" } %>

RJS
page['cat'].visual_effect :blind_down

CONTROLLER
class MainController < ApplicationController

  def index
    @posts = Post.find(:all, :order => 'date DESC', :limit => 2)
  end
 
  def show
    @post = Post.find(params[:id])
  end
 
  def new
    @comment = Comment.new
  end
 
  def comment
    Post.find(params[:id]).comments.create(params[:comment])
    flash[:notice] = "Comment Added!"
    redirect_to :action => 'show', :id => params[:id]
  end
 
  def categories_and_links
  end
 
end


CSS
.dropdown {
}

.dropdown #shade-top {
position: relative;
float:left;
z-index:-1;
width: 100%;
background-image: url(/images/shade.gif);
background-repeat: repeat-x;
height: 15px;
}

.dropdown #back {
z-index: 1;
position: relative;
float: left;
width: 100%;
background-image: url(/images/back.gif);
background-repeat: repeat;
height: 175px;
}

.dropdown #shade-lower {
position: absolute;
float:left;
z-index:-1;
top: 160px;
width: 100%;
background-image: url(/images/shade-lower.gif);
background-repeat: repeat-x;
height: 15px;
}

/* Categories */

.dropdown .categories {
float: left;
position: relative;
width: 100%;
}

.dropdown .categories h1 {
font-weight: bolder;
background-color: transparent;
color: black;
font-size: 21px;
left: 10px;
}

.dropdown .categories ul {
font-weight: bold;
font-size: 12px;
float: left;
position: relative;
bottom: 10px;
right:25px
}


/*
* END OF DROP DOWN
*/


If it would be more helpful, I could try and host what I've been playing with so you can actually see what I mean.