jQuery：動畫到垂直位置

Question

我有一個垂直菜單（html列表）與箭頭圖像（作爲一個div）。我想讓箭頭垂直滑動到點擊位置。

應該是一個非常簡單的動畫！

Answer 1

Click here to see this in action.

HTML

<ul> 
    <li>Click</li> 
    <li>Here</li> 
    <li>And</li> 
    <li>Watch</li> 
    <li>The</li> 
    <li>Magic</li> 
    <li>Happen</li> 
</ul> 
<div id="bullet">&diams;</div>​ 

CSS

ul { list-style:outside circle; padding-left:20px; } 
li { cursor: pointer; } 
#bullet { color:#0c0; padding:1px 0 0 3px; position:absolute; top:200px; } 
​ 

重要組成部分，是#bullet { position:absolute; }

jQuery的（在$(document).ready）

$('li').bind('click', function(e) { 
    var offset = $(e.target).offset(); 
    $('#bullet').animate({'top':offset.top},600); 
});​ 

很簡單！

Answer 2

像下面可能：

$('#arrow_image').animate($('#vertical_menu').position(), 'slow'); 

position可能是offset根據上下文。

編輯：呃，閱讀題做錯:)

將其移動到鼠標位置在點擊處理程序：

var click_handler = function(event) { 
    $('#arrow_image').animate(
    { 
     left: event.pageX - $('#vertical_menu').offset().left 
    }, 'slow'); 
} 

left取決於照常上下文其中箭頭圖像位於DOM，如果它的絕對位置與body有關，那麼pageX就足夠了。