使用Jquery确定页面元素位置的方法

Question

我正在使用offset()来获取UL之后的图像当前位置。我正在定位图像，以便它将第一个li作为指针挂起。当点击任何li时，我希望图像滑动到特定的li。

我第一次点击一个li它滑动到页面的中心。但是，当我做出后续点击时，它会移动适当的距离，只能在页面的中心，因为它已被错误地设置。

我希望这是有道理的。

这里是我的HTML

<ul id="llist"> 
    <li class="t current"><a href="#"><span>solutions</span></a><img src="images/bg-tab-leader-arrow.png" width="24" height="53" title="pointer" class="pointer" /></li> 
    <li class="m"><a href="#"><span>credit mangement solutions</span></a></li> 
    <li class="b"><a href="#"><span>third party additions</span></a></li> 
</ul> 

和我的JS更新（这也很好地淡出选项卡）

$('#llist li').click(function() { 
    var thisTop = $(this).offset().top; 
    $('.pointer').animate({'top': thisTop}); 
    return false; 
}); 

CSS：

#subheader { position:relative; } 
#subheader #llist { float:left; width:286px; margin:0 0 18px 0; padding:0; list-style:none; } 
#subheader #llist li { color:#005474; line-height:68px; height:70px; background:url(../images/bg-tab-leader.png) no-repeat; position:relative; } 
#subheader .pointer { z-index:1000; position:absolute; top:9px; right:-22px; } 

任何想法，为什么这个职位本身在页面的中心，当我第一次点击，而不是只是滑动它的相对李将大大appre ciated。

Answer 1

我通过这条线弄得一点点：

var thisTop = $('#llist').offset().top; 

...因为它得到llist的top位置，不被点击的<li>。

如果我将其更改为：

var thisTop = $(this).offset().top; 

...这似乎很好地工作。

例子：http://jsfiddle.net/patrick_dw/hxAzW/1/

---

编辑：

的问题可能是，你需要使用.position()代替.offset()，所以它使用<li>内的相对位置容器。

编辑：

也像你需要给relative定位到容器llist。