Question

I have a vertical menu (html list) with an arrow image (as a div). I would like the arrow to slide vertically to the clicked position.

Should be a pretty simple animate!

Answer 1

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!