jQuery list hover

Question

I have a jQuery slider in working motion with previous and next buttons. The only thing is,I want it so that when you hover on these buttons, a preview of the next or previous slide is shown and when you move your mouse away they hide. I just can't seem to get it to work...

$('.next_slide').mouseenter(function() {
   $('.slide_container li').stop().animate({ left: -440 }, 10, 'easeInOutExpo');                            
});

my html is....

<div id="slides">
   <ul class="slide_container">
      <li class="one slide"></li>
      <li class="two slide"></li>
      <li class="three slide"></li>
   </ul>
   <div id="slide_nav">
      <a href="#" class="prev_slide">&laquo; Previous</a>
      <a href="#" class="next_slide">Next &raquo;</a>
   </div>
</div>

The slides are 1440px in width.

Answer 1

You only have mouseenter, not mouseout; you should defined both.
If you use Hover, you can include both actions in the same script.

For example (from the jQuery site):

$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  }, 
  function () {
    $(this).find("span:last").remove();
  }
);

Answer 2

Try this -

$('.next_slide').hover(
  function(){ // OVER
    $('.slide_container li').stop().animate({ left: -440 }, 10, 'easeInOutExpo');
  },
  function(){ // OUT
    $('.slide_container li').stop().animate({ left: 0 }, 10, 'easeInOutExpo');
  }
);