Schieben Sie ein Bild nach Position mit Hilfe von jquery

Question

Ich versuche, das Bild zu seiner Mitte Position auf der jeweiligen li, die geklickt wird, zu verschieben. Wenn ich zum Beispiel auf Nummer 2 in der Liste klicke, wird es auf Nummer 2 verschoben. Das Problem ist, zu wissen, wo der Benutzer als nächstes klickt, wie man die aktuelle Position und welche Richtung zu gleiten versteht.

Hier ist mein 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> 

Hier meine Jquery ist so weit:

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

Jede Hilfe würde geschätzt.

Answer 1

Idee ist es, die Position des li zu verwenden, die angeklickt wurde, sehen sie in Aktion here

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