2

アイテムをクリックすると、リンクがテキストに変更され（選択したアイテムからハイパーリンク機能が削除されます）、色が「一般的なリンク」から「選択された」色にスムーズに変更されるメニューを作成しようとしています。私のコードは、新しいバージョンの Firefox を除いて、どこでも動作します。FF では、トランジションがちらつきます。

私のメニューは、ページの読み込み時に動的に作成されます。「createInitial()」と呼ばれる関数がこのアクションを担当します。

    function createInitial(){

        // BLA-BLA-BLA SOME CODE

        //construct menu
        for(i=0; i<pages.length; i++){ //for every item of pages[] array
            $dashLink = $("<a>");
            $dashLink.html(pages[i].title);
            $dashLink.attr("href", "javascript:void(0)");
            $dashLink.attr("id", "dashLink" + i); //create a link for a particular page (with matching ID field)
            $dashLink.click(menuHandler);

            $dashText = $("<span>");
            $dashText.html(pages[i].title);
            $dashText.attr("id", "dashText" + i); //create a text (to be used instead of a link, while on a page) for a particular page
            $dashText.css("display", "none");

            $("#menu").append("[ ", $dashLink, $dashText, " ] "); //add links and texts to same bracket space in the menu
        }
        //

        //creates default text instead of a link
        $("#dashLink" + currentPage).css("display", "none");
        $("#dashText" + currentPage).css("display", "inline");
        //

        // BLA-BLA-BLA SOME CODE

    }

この関数は、ページの読み込み時に一度だけ実行されます。その後、関数「changeHeading()」がメニュー内のすべての項目を変更します。

        function changeHeader(page){ //change a page
        //stop all previous animation
        $("#heading").stop();
        $("#content").stop()
        $("#menu a").stop(true);
        $("#menu span").stop(true);
        //

        //change current page to new, store current page id
        tempPage = currentPage;
        currentPage = page;
        //

        //record current changing menu items color state
        currentPageLinkTextColor = $("#dashText" + tempPage).css("color"); // starting point for current page menu text item
        nextPageLinkColor = $("#dashLink" + page).css("color"); //starting point for clicked page menu link item
        //

        //show current page menu item as link and start chaging to link color
        $("#dashLink" + tempPage).css("color", currentPageLinkTextColor);
        $("#dashText" + tempPage).hide();
        $("#dashLink" + tempPage).show();
        $("#dashLink" + tempPage).animate({color: linkColor}, transitionTime*2);
        //

        //show next page menu item as text and start changing to text color
        $("#dashText" + page).css("color", nextPageLinkColor);
        $("#dashLink" + page).hide();
        $("#dashText" + page).show();
        $("#dashText" + page).animate({color: linkTextColor}, transitionTime*2);
        //

        $("#menu a").animate({color: linkColor}, transitionTime*2); //change all menu links to link color

        //changes title
        $("#heading").fadeOut(transitionTime, function() { //fade out / fade in title
            $("#heading").html(pages[page].title)
            $("#heading").fadeIn(transitionTime)
        });
        //
    }

このコードは、新しいバージョンの Firefox (確かではありませんが、おそらく Windows のみ) を除いて、どこでも (IE でも) 完全に機能します。Linux Mint で Firefox 12 をテストしましたが、魅力的に動作します。ただし、Windows で Firefox 15 を使用してテストすると、トランジションがちらつきます。人々が同様の問題を抱えているいくつかのスレッドを見つけましたが、それらのほとんどは FF15 には古すぎます。私が試したいくつかのリンクは次 の とおりです。問題-on-firefox-with-fadeout-and-fadein/

何も役に立ちませんでした...残念ながら。何が問題なのか誰にも分かりますか? ありがとう！

4

0 に答える 0