Question

I am trying to builder a nav slider, which is like an arrow sliding under the navigation links. I would like to animate it to the center of a div.

This is my nav code:

<nav>

        <ul class="tabs">
            <li id="tab1"><a href="#">Cursussen</a></li>
            <li id="tab2"><a href="#">Resultaten</a></li>
            <li id="tab3"><a href="#">Inbox</a></li>
            <li id="tab4"><a href="#">Profiel</a></li>
            <li id="tab5"><a href="#">Aanbod</a></li>
        </ul>

        <a id='slider'><img src="img/arrow.png"></a>

</nav>

And this is the jquery i use to animate:

$(function(){
        $('li#tab1').click(function(evt) {
            evt.preventDefault();
            $('#slider').animate({
                left : '32'
            });
        });
});

I was thinking I could create a var like the following, which calculates the width of the div I want to move to the center of. But I don’t exactly know how to write the code for the animation part.

var w = '$(#slider).parent().width()'/2

Answer 1

Please try this js fiddle:

http://jsfiddle.net/Q4efa/2/

In particular, I used the following method:

$('ul.tabs li').click(function(event){

    event.preventDefault();

    var ulOffsetLeft = $('ul.tabs').offset().left;
    var currentOffset = $(this).offset().left;

    var delta = currentOffset - ulOffsetLeft;

    $('#slider').clearQueue().animate({'margin-left': delta});

});​

UPDATE: I added some automatic padding calculation to this new fiddle here:

http://jsfiddle.net/Vt2dv/8/