jQuery UI slide effect on mouseenter

[admin]

I've been at this for a couple of days now, so any help would be much appreciated. I've got a link which contains two divs sitting on top of each other. The top div is hidden, but slides in to partially cover the bottom div on

mouseenter

, and then out again on

mouseleave

. It is working to a degree, but is a bit buggy. This is what I have for the jQuery (which I've pieced together from the demos and the documentation):

$(document).ready(function(){
    $(".toggle").bind("mouseenter",function(){
        $("> :eq(0)", this).show("slide", { direction: "down" });
    }).bind("mouseleave",function(){
        $("> :eq(0)", this).hide("slide", { direction: "down" });
    });
});

and this is the page structure (it's a wordpress page)

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
  <a href="<?php the_permalink(); ?>" class="toggle">
    <div id="slide" class="post-info" style="display: none;">
      <h1><?php the_title(); ?></h1>
      <ul>
        <li>more info here</li>
        <li>more info here</li>
      </ul>
    </div>
    <div class="post-image">
      <img src="<?php post_image('', false, false); ?>" width="275" height="155" />
    </div>  
  </a>
</div>