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

这段代码在任何地方都能完美运行（即使在 IE 中），除了较新版本的 Firefox（不确定，但可能只在 Windows 上）。我已经在 Linux Mint 上测试了 Firefox 12，它就像一个魅力。但是，在 Windows 上使用 Firefox 15 进行测试时 - 过渡闪烁严重！我发现了几个线程，人们遇到了类似的问题，但其中大多数对于 FF15 来说太旧了。这是我尝试过的几个链接： - Firefox 中的 jQuery SlideDown 闪烁 - jquery animate (height) 导致 Firefox 中的背景图像闪烁 - http://voidcast.wordpress.com/2011/03/29/jquery-flicker-问题-on-firefox-with-fadeout-and-fadein/

没有任何帮助......不幸的是。有谁知道可能是什么问题？谢谢！

4

0 回答 0