jQuery: Animate to vertical position

I have a vertical menu (html list) with an arrow image (as a div). I wou开发者_C百科ld like the arrow to slide vertically to the clicked position.

Should be a pretty simple animate!

Click here to see this in action.

HTML

<ul>
  <li>Click</li>
  <li>Here</li>
  <li>And</li>
  <li>Watch</li>
  <li>The</li>
  <li>Magic</li>
  <li>Happen</li>
</ul>
<div id="bullet">&diams;</div>​

CSS

ul { list-style:outside circle; padding-left:20px; }
li { cursor: pointer; }
#bullet { color:#0c0; padding:1px 0 0 3px; position:absolute; top:200px; }
​

Important part is #bullet { position:absolute; }

jQuery (in $(document).ready)

$('li').bind('click', function(e) {
    var offset = $(e.target).offset();
    $('#bullet').animate({'top':offset.top},600);
});​

Pretty simple!

Like following perhaps:

$('#arrow_image').animate($('#vertical_menu').position(), 'slow');

position might be offset depending on context.

Edit: erm, read question wrong :)

to move it to mouse position in a click handler:

var click_handler = function(event) {
  $('#arrow_image').animate(
    {
      left: event.pageX - $('#vertical_menu').offset().left 
    }, 'slow');
}

left depends as usual on context where the arrow image is located in DOM, if it's absolute positioned in relation to body then pageX is sufficient.