Question

I have a menu and i use jquery to animate it. When you click on “a” in the menu some ajax content is loaded in.

I want to stop the animation of the link (A) of the page you are on and give it another color.
When you click another link, the previous link is animated again and has the old colors again.

This is the function:

$.fn.flipNav = function(options) {

        options = $.extend({
            speed : 200
        }, options);

        return this.each(function() {

                console.log(this);

            var nav = $(this),
                lis = $('li', nav),
                anchors = $('.inactive', lis).css('padding', 0),
                spanHeight;

            $.each(anchors, function() {
                var a = $(this),
                    val = a.text();

                a.html('<span>' + val + '</span> <span>' + val + '</span>')
                 .parent('li')
                    .height(a.children('span:first').outerHeight())
                 .end()
                 .children('span:first')
                    .css('marginTop', 0) // strange for IE
            }); 

            spanHeight = lis.eq(0).height();

            lis.hover(function() {
                $(this).find('span:first').animate({
                    marginTop : '-' + spanHeight
                }, { duration: options.speed, queue : false });
            }, function() {
                $(this).find('span:first').animate({
                    marginTop : 0
                }, { duration: options.speed, queue: false });
            });

        }); // end each

    }

and this is some code i worked on:

$(".inactive").click(function(){
$("#navigatie ul li a").each(function(){
            $(this).removeClass("active").addClass('inactive');
            });

        $(this).removeClass("inactive").addClass('active');
        $(this).find('span').css("color", "#BE1823");

        $(this).find('span:first').stop(true, true);

    });

I have a fiddle with all the working code: http://jsfiddle.net/388Qs/
As you can see, the color changes but the animation doesn’t stop.

Answer 1

Change this section to

lis.hover(function() {
                $(this).find('a:not(".active") span:first').animate({
                    marginTop : '-' + spanHeight
                }, { duration: options.speed, queue : false });
            }, function() {
                $(this).find('a:not(".active") span:first').animate({
                    marginTop : 0
                }, { duration: options.speed, queue: false });
            });

and it should take care of the animating part. The background color will still need to be reapplied, but I think the problem area you mention should be fixed.