Question

我有一个菜单，我使用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/ 如您所见，颜色会发生变化，但动画不会停止。

Answer 1

将此部分更改为

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

它应该照顾动画部分。背景颜色仍然需要重新应用，但我认为你提到的问题区域应该是固定的。

切换停止并在点击时使用jquery启动动画

1 个答案: