jQuery: Animer en position verticale

Question

J'ai un menu vertical (liste html) avec une image en forme de flèche (en tant que div). Je voudrais que la flèche glisse verticalement à la position cliquée.

Devrait être une animation assez simple!

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; } 
​ 

Une partie importante est #bullet { position:absolute; }

jQuery (en $(document).ready)

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

Assez simple!

Answer 2

Comme suit peut-être:

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

position pourrait être offset selon le contexte.

Edit: erm, lu mauvaise question :)

pour le déplacer à la position de la souris dans un gestionnaire de clic:

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

left dépend comme d'habitude sur le contexte dans lequel l'image de flèche est situé dans DOM, s'il est positionné en absolu par rapport à body alors pageX est suffisant.