使用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。