Question

如果我做错了，请原谅我。我是编码的新手，这也是我的第一篇StackOverflow帖子：

任何人都可以帮我解释为什么我的拼凑JQuery在Chrome或IE中无法正常运行？它在Firefox中运行良好。在Chrome中，整个页面在代码块执行时更改，然后恢复正常。 IE过渡不起作用。我的代码中有一些标签。这可能是问题吗？请帮忙。

以下是网站：http://rbrewer.mydevryportfolio.com/

这是我的Javascript：

<script type="text/javascript">

    $("document").ready(function() {
        flag=true;
        $(window).scroll(function(){
        st = $(window).scrollTop();
        if(st>500){
            if(flag);
            $("#cwpBox").css("opacity", ".2");
            $("#psLogo").css("top","0px");
            $("#psLogo").css("opacity","1");
            $("#psBar").css("width","98%");
            $("#psLabel").css("opacity","1");
            $("#psSkill").css("opacity","1");
            setTimeout (function(){
                $("#aiLogo").css("top","0px");
                $("#aiLogo").css("opacity","1");
                $("#aiBar").css("width","93%");
                $("#aiLabel").css("opacity","1");
                $("#aiSkill").css("opacity","1");
                }, 500);
            setTimeout (function(){
                $("#htmlLogo").css("top","0px");
                $("#htmlLogo").css("opacity","1");
                $("#htmlBar").css("width","80%");
                $("#htmlLabel").css("opacity","1");
                $("#htmlSkill").css("opacity","1");
                }, 1000);
            setTimeout (function(){
                $("#cssLogo").css("top","0px");
                $("#cssLogo").css("opacity","1");
                $("#cssBar").css("width","80%");
                $("#cssLabel").css("opacity","1");
                $("#cssSkill").css("opacity","1");
                }, 1500);
            setTimeout (function(){
                $("#javaLogo").css("top","0px");
                $("#javaLogo").css("opacity","1");
                $("#javaBar").css("width","60%");
                $("#javaLabel").css("opacity","1");
                $("#javaSkill").css("opacity","1");
                }, 2000);
            setTimeout (function(){
                $("#phpLogo").css("top","0px");
                $("#phpLogo").css("opacity","1");
                $("#phpBar").css("width","40%");
                $("#phpLabel").css("opacity","1");
                $("#phpSkill").css("opacity","1");
                }, 2500);
            /*setTimeout (function(){$("#psLabel").css("opacity","1")}
            , 1600);
            setTimeout (function(){$("#psSkill").css("opacity","1")}
            , 2100)*/
        }
        else if (st<500){
            if(flag);
            $("#cwpBox").css("opacity", "1");
            $("#psLogo").css("top","100px");
            $("#psLogo").css("opacity","0");
            $("#psBar").css("width","0");
            $("#psLabel").css("opacity","0");
            $("#psSkill").css("opacity","0");
            setTimeout (function(){
                $("#aiLogo").css("top","100px");
                $("#aiLogo").css("opacity","0");
                $("#aiBar").css("width","0");
                $("#aiLabel").css("opacity","0");
                $("#aiSkill").css("opacity","0");
                }, 500);
            setTimeout (function(){
                $("#htmlLogo").css("top","100px");
                $("#htmlLogo").css("opacity","0");
                $("#htmlBar").css("width","0");
                $("#htmlLabel").css("opacity","0");
                $("#htmlSkill").css("opacity","0");
                }, 1000);
            setTimeout (function(){
                $("#cssLogo").css("top","100px");
                $("#cssLogo").css("opacity","0");
                $("#cssBar").css("width","0");
                $("#cssLabel").css("opacity","0");
                $("#cssSkill").css("opacity","0");
                }, 1500);
            setTimeout (function(){
                $("#javaLogo").css("top","100px");
                $("#javaLogo").css("opacity","0");
                $("#javaBar").css("width","0");
                $("#javaLabel").css("opacity","0");
                $("#javaSkill").css("opacity","0");
                }, 2000);
            setTimeout (function(){
                $("#phpLogo").css("top","100px");
                $("#phpLogo").css("opacity","0");
                $("#phpBar").css("width","0");
                $("#phpLabel").css("opacity","0");
                $("#phpSkill").css("opacity","0");
                }, 2500);


        }//--closes else if
        else{flag=false;}
        }); //--closes window.scroll function
    }); //--closes document ready function
    </script>

Answer 1

这真是奇怪的行为。它可能不是最好的解决方案，但我发现我通过将背景图像分配给CSS中的html而不是正文来让它在Chrome中工作。您还必须删除正文背景颜色。我有兴趣看看实际的核心问题是什么。

JQuery Animations仅适用于Firefox

1 个答案: