Question

我有一个带箭头图像的垂直菜单（html列表）（作为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就足够了。

jQuery：动画到垂直位置

2 个答案: