jquery动画问题: how to constrain a DIV animation within another DIV?

Question

我创建了一个列表和一个元素符号来跟随选定的<li> 点击时的元素。

HTML代码:

<div class="right">
<div id="bullet">&diams;</div>
  <ul>
   <li><a href="#link1">link1</a></li>
   <li><a href="#link2">link2</a></li>
   <li><a href="#link3">link3</a></li>
   <li><a href="#link4">link4</a></li>
  </ul>
</div>

JQUERY 代码:

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

问题是，每次我加载页面并第一次单击链接时，元素符号来自浏览器顶部，而不是从其 <div> 开始动画。所选链接的位置。第一次点击后，链接之间的动画就可以正常工作了。

你能帮我解决这个问题吗？提前致谢!

Answer 1

将 position: relative; 放在 .right 上。

绝对定位元素(如具有动画 top 属性的元素)始终使用浏览器 View 空间的左上角作为 0:0，除非它们的父元素具有除静态之外的任何位置。在这种情况下，父项的左上角为 0:0。