Paul Redmond Paul Redmond - 25 days ago 11
Javascript Question

jQuery - Animate menu active icon

The active class displays a dot icon above the list item. I would like it so that when you hover over another list item the icon slides left or right and stops in the correct position.

I have already added the JS to take the active class off and add it to the currently hovered item, but would very much appreciate help in animating this transition.

Fiddle: http://jsfiddle.net/WgszM/

$(".desktop-menu li").hover(function(){
$("ul li.active").removeClass('active');
$(this).stop().addClass('active');
})

Answer

Well in order to have the effect you want, that is: the dot moving to another element, you are going to need to create an extra element which will move to where you hover.

So I suggest doing something like this:

$('ul li').hover( function() {
    var acl = $(this).offset();
    var aw = $(this).width();
    var ll = acl.left + parseInt( aw / 2 );
    var tt = acl.top - 8;
    $('#active').animate({
            left : ll + 'px',
            top : tt + 'px' 
        });
});

Here is the full example: http://jsfiddle.net/ec9cm/

Is this what you want to achieve?