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

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');
  }
);