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 に答える