jQuery: анимировать в вертикальное положение

Question

У меня есть вертикальное меню (html list) с изображением стрелки (как div). Я бы хотел, чтобы стрелка сдвинулась вертикально в положение щелчка.

Должно быть довольно просто оживить!

Answer 1

Нажмите здесь, чтобы увидеть это в действии.

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; }
​

Важная часть #bullet { position:absolute; }

JQuery (в $(document).ready)

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

Довольно просто!

Answer 2

Вроде возможно следующее:

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

position может быть offset в зависимости от контекста.

Редактировать: эм, прочитайте вопрос неправильно:)

чтобы переместить его в положение мыши в обработчике кликов:

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

left зависит, как обычно, от контекста, в котором изображение стрелки находится в DOM, если его абсолютное положение относительно body, тогда достаточно pageX.