Question

I am trying to get the image to slide to its centre position on the respective li which is clicked. So for example if i click number 2 in the list it will slide to number 2. The issue is knowing where the user clicks next, how to figure the current position and which direction to slide.

Here is my 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>

Here is my jquery so far:

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

Any help would be appreciated.

Answer 1

Idea is to use the position of the li that got clicked, see it in action here

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