jQuery UI slide effect on mouseenter

Question

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>

Answer 1

Try something like this.

$(document).ready(function(){
    $(".toggle").bind("mouseenter",function(){
        $("#slide").slideDown("slow");
        $("#post-image").slideUP("slow");
    }).bind("mouseleave",function(){
        $("#slide").slideUP("slow");
        $("#post-image").slideDown("slow");});
    });
});

Answer 2

Thanks Birk, but top div slides in to partially cover the bottom div, so I don't need it to slide out. I'll try your syntax though and see if there is any improvement.

-- edit --

Worked a charm. Thanks again.

Answer 3

You might also want to have a look at the accordian plugin for jquery