使用jquery按位置滑動圖像

Question

我想讓圖像滑動到相應的單擊li上的中心位置。因此，例如，如果我在列表中單擊數字2，它將滑動到數字2.問題是知道用戶下一步單擊的位置，如何確定當前位置以及滑動方向。

這裏是我的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> 

這是到目前爲止我的jquery：

$('#leader #llist li').click(function() { 
     $('.pointer').animate({'top':'+=61px'},1000,function() { 
      $(this).removeClass('current'); 
    }); 
    }, function() { 
     $('.pointer').animate({'top':'-=61px'},1000); 
     $(this).addClass('current'); 
    }); 

任何幫助，將不勝感激。

Answer 1

想法是使用得到了點擊的李的位置，看到它在行動here

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