Jqueryを使用してページ上の要素の位置を決定する方法

Question

offset()を使用して、ULの直後の画像の現在位置を取得しています。私はそれがポインターとして最初の李にぶら下がるように絶対にイメージを置いています。任意の李がクリックされるとき、私はその特定の李にスライドする画像を望む。

初めて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; } 

任意のアイデアこの位置理由についてページの中央に、それを相対LIにスライドするのではなく、最初にクリックすると大きくなるciated。

Answer 1

私はこのラインで混乱少しだ：それはクリックされたllist、ない<li>のtop位置を取得しますので、...

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

。

私はそれを変更した場合：

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

...正常に動作するようです。

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

---

EDIT：

問題は、それが<li>内での相対的な位置を使用するようにあなたは、.offset()の代わりに.position()を使用する必要があるのか​​もしれコンテナ。

EDIT：あなたは、コンテナllistにrelative位置付けを与える必要があるよう

も見えます。