0

我有一个菜单，我使用 jquery 对其进行动画处理。当您单击菜单中的“a”时，会加载一些 ajax 内容。

我想停止您所在页面的链接 (A) 的动画并给它另一种颜色。当您单击另一个链接时，前一个链接将再次变为动画并再次具有旧颜色。

这是功能：

$.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

    }

这是我处理的一些代码：

$(".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);

    });

我对所有的工作代码都很有兴趣：http: //jsfiddle.net/388Qs/ 如您所见，颜色会发生变化，但动画不会停止。

4

1 回答 1

2

将此部分更改为

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 });
            });

它应该处理动画部分。背景颜色仍然需要重新应用，但我认为你提到的问题区域应该修复。

于 2012-12-10T21:49:36.967 回答