Question

我创建了一个列表和项目符号，以便在点击上关注所选的<li>项目。

HTML code：

<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上。

绝对定位元素（如具有动画顶级属性的元素）始终使用浏览器视图空间的左上角为0：0，除非它们具有除静态之外的任何位置的父级。在这种情况下，父母的左上角是0：0。

Answer 2

将容器div .right设置为position:relative。

Jquery-animate问题：如何在另一个DIV中约束DIV动画？

2 个答案: