Javascript 我的JQuery脚本有几个问题

我大约从昨天开始学习JavaScript，这是指向我的“完整”html的JSFIDLE链接

HTML

JavaScript

(function (d) {     //* the following script is taken from the source = http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor
d.each(["backgroundColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "outlineColor"], function (f, e) {
    d.fx.step[e] = function (g) {
        if (!g.colorInit) {
            g.start = c(g.elem, e);
            g.end = b(g.end);
            g.colorInit = true
        }
        g.elem.style[e] = "rgb(" + [Math.max(Math.min(parseInt((g.pos * (g.end[0] - g.start[0])) + g.start[0]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[1] - g.start[1])) + g.start[1]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[2] - g.start[2])) + g.start[2]), 255), 0)].join(",") + ")"
    }
});

function b(f) {
    var e;
    if (f && f.constructor == Array && f.length == 3) {
        return f
    }
    if (e = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)) {
        return [parseInt(e[1]), parseInt(e[2]), parseInt(e[3])]
    }
    if (e = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)) {
        return [parseFloat(e[1]) * 2.55, parseFloat(e[2]) * 2.55, parseFloat(e[3]) * 2.55]
    }
    if (e = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)) {
        return [parseInt(e[1], 16), parseInt(e[2], 16), parseInt(e[3], 16)]
    }
    if (e = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)) {
        return [parseInt(e[1] + e[1], 16), parseInt(e[2] + e[2], 16), parseInt(e[3] + e[3], 16)]
    }
    if (e = /rgba\(0, 0, 0, 0\)/.exec(f)) {
        return a.transparent
    }
    return a[d.trim(f).toLowerCase()]
}
function c(g, e) {
    var f;
    do {
        f = d.css(g, e);
        if (f != "" && f != "transparent" || d.nodeName(g, "body")) {
            break
        }
        e = "backgroundColor"
    } while (g = g.parentNode);
    return b(f)
}
var a = {
    aqua: [0, 255, 255],
    azure: [240, 255, 255],
    beige: [245, 245, 220],
    black: [0, 0, 0],
    blue: [0, 0, 255],
    brown: [165, 42, 42],
    cyan: [0, 255, 255],
    darkblue: [0, 0, 139],
    darkcyan: [0, 139, 139],
    darkgrey: [169, 169, 169],
    darkgreen: [0, 100, 0],
    darkkhaki: [189, 183, 107],
    darkmagenta: [139, 0, 139],
    darkolivegreen: [85, 107, 47],
    darkorange: [255, 140, 0],
    darkorchid: [153, 50, 204],
    darkred: [139, 0, 0],
    darksalmon: [233, 150, 122],
    darkviolet: [148, 0, 211],
    fuchsia: [255, 0, 255],
    gold: [255, 215, 0],
    green: [0, 128, 0],
    indigo: [75, 0, 130],
    khaki: [240, 230, 140],
    lightblue: [173, 216, 230],
    lightcyan: [224, 255, 255],
    lightgreen: [144, 238, 144],
    lightgrey: [211, 211, 211],
    lightpink: [255, 182, 193],
    lightyellow: [255, 255, 224],
    lime: [0, 255, 0],
    magenta: [255, 0, 255],
    maroon: [128, 0, 0],
    navy: [0, 0, 128],
    olive: [128, 128, 0],
    orange: [255, 165, 0],
    pink: [255, 192, 203],
    purple: [128, 0, 128],
    violet: [128, 0, 128],
    red: [255, 0, 0],
    silver: [192, 192, 192],
    white: [255, 255, 255],
    yellow: [255, 255, 0],
    transparent: [255, 255, 255]
}
})(jQuery); //* external script ends here

$("#square").animate({ "opacity" : "1" }); // v-- original screen
$("p#begin").animate({"opacity" : "1" });

var sqrs = [
    "#sq1",
    "#sq2",
    "#sq3",
    "#sq4"
]
var sqLength = sqrs.length;
var pageInt = 0;

for (i = 0; i < sqLength; i++) {
    $("#form"+[i+1]).hide();
    $(sqrs[i]).hide();
}

function beginScript() {        // function for initial 'square' div
    $("#square").addClass("removeLinkEffect");
    $("p#begin").fadeOut('slow', function() {       // removes 'click here to begin' text 
        $("#begin").remove();       // complete remove
        $(".square").animate({      // transforms initial square
            "height" : "40px"
        },
        1000,
        function() {
            $(".square").animate({
                "width" : "790px"
            },
            1000,
            function() {                                // v-- launches the View screens(divs)
                var loadText = "Loading, Please wait...";
                var pageText = "";

                $("#square").addClass("fontStyle").html(loadText);
                $("#square").animate({
                    "opacity" : "0"
                }, 1000,
                function () {
                    $("#square").remove();      // removes initial square
                });
                for (i = 0; i < sqLength; i++) {        // transforms View divs
                    $(sqrs[i]).show().animate({
                        "position" : "static",
                        "height" : "70px",
                        "marginTop" : "80px",
                        "opacity" : "1"
                    }, 1000);
                    pageText = "View " + [i+1];     // View #
                    $(sqrs[i]).addClass("fontStyle").addClass("addLinkEffect").html(pageText);
                }
            });
        });
    });
}

function fncSq1() {     // function for 'View 1'
    checkOpenDivs();
    $(sqrs[0]).addClass("removeLinkEffect").html("Loading...").promise().done(function() {
        $(sqrs[0]).html(
            "Text 1"
        ).animate({     // launches 'View' window
            "height" : "290px",
            "width" : "790px",
            backgroundColor : "#ffffff",
            color : "black"
        });
        $("#form1").show();
    });
}
function fncSq2() {     // function for 'View 2'
    checkOpenDivs();
    $(sqrs[1]).addClass("removeLinkEffect").html("Loading...").promise().done(function() {
        $(sqrs[1]).html("Text 2").animate({     // launches 'View' window
            "height" : "290px",
            "width" : "790px",
            backgroundColor : "#ffffff",
            color : "black"
        });
        $("#form2").show();
    });
}
function fncSq3() {     // function for 'View 3'
    checkOpenDivs();
    $(sqrs[2]).addClass("removeLinkEffect").html("Loading...").promise().done(function() {
        $(sqrs[2]).html("Text 3").animate({     // launches 'View' window
            "height" : "290px",
            "width" : "790px",
            backgroundColor : "#ffffff",
            color : "black"
        });
        $("#form3").show();
    });
}
function fncSq4() {     // function for 'View 4'
    checkOpenDivs();
    $(sqrs[3]).addClass("removeLinkEffect").html("Loading...").promise().done(function() {
        $(sqrs[3]).html("Text 4").animate({     // launches 'View' window
            "height" : "290px",
            "width" : "790px",
            backgroundColor : "#ffffff",
            color : "black"
        });
        $("#form4").show();
    });
}

function checkOpenDivs() {      // checks for any other divs that have launched previously
    for (i = 0; i < sqLength; i++) {
        $(sqrs[i]).removeClass("removeLinkEffect").html("View " + [i+1]).animate({  // returns 'open' divs to original
            "position" : "static",
            "height" : "70px",
            "width" : "790px",
            "marginTop" : "80px",
            backgroundColor : "#ffaa00",
            color : "white"
        });
        $("#form"+[i+1]).hide();
    }
}

我需要以下方面的帮助：

1在我选择一个“查看”选项卡后，加载时间似乎非常长，大约20秒

2页面滚动条似乎不起作用

---

任何帮助都将不胜感激

你的动画有1秒的持续时间，我看到大约4个。这是4秒。正方形。动画{高度：40px}，1000，。。。。1000表示动画的持续时间（毫秒）。将其设置为一个较小的数字。

您的正方形位置是固定的，这使得页面看起来好像没有滚动。您可以完全删除位置样式，它应该可以

#squarePos {
    position: fixed;
}

至于加载时间，您的动画都在1秒超时时运行。您可以缩短超时以加快时间

---

是的，但是我的主要问题在程序开始执行fncSq函数时就开始了。动画中花费的4秒是可见的，因为它们会减慢动画以覆盖设置的时间。我提到的20秒是在没有发生任何事情的情况下加载脚本所需的时间。更改位置确实解决了滚动问题，谢谢！此外，即使在删除1秒超时后，在“fncSq”函数中设置div动画似乎也需要大约15秒。为了确保“删除”超时，您实际上必须将其设置为0，因为默认持续时间为400ms。在将持续时间设置为（比如）100毫秒后，您是否仍有如此长的等待时间？事实上，减少动画时间确实会将等待时间减少到设置为100毫秒后的3秒左右，但您能否解释为什么增加第一个div的动画时间似乎会改变其他div的加载时间？

(function (d) {     //* the following script is taken from the source = http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor
d.each(["backgroundColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "outlineColor"], function (f, e) {
    d.fx.step[e] = function (g) {
        if (!g.colorInit) {
            g.start = c(g.elem, e);
            g.end = b(g.end);
            g.colorInit = true
        }
        g.elem.style[e] = "rgb(" + [Math.max(Math.min(parseInt((g.pos * (g.end[0] - g.start[0])) + g.start[0]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[1] - g.start[1])) + g.start[1]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[2] - g.start[2])) + g.start[2]), 255), 0)].join(",") + ")"
    }
});

function b(f) {
    var e;
    if (f && f.constructor == Array && f.length == 3) {
        return f
    }
    if (e = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)) {
        return [parseInt(e[1]), parseInt(e[2]), parseInt(e[3])]
    }
    if (e = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)) {
        return [parseFloat(e[1]) * 2.55, parseFloat(e[2]) * 2.55, parseFloat(e[3]) * 2.55]
    }
    if (e = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)) {
        return [parseInt(e[1], 16), parseInt(e[2], 16), parseInt(e[3], 16)]
    }
    if (e = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)) {
        return [parseInt(e[1] + e[1], 16), parseInt(e[2] + e[2], 16), parseInt(e[3] + e[3], 16)]
    }
    if (e = /rgba\(0, 0, 0, 0\)/.exec(f)) {
        return a.transparent
    }
    return a[d.trim(f).toLowerCase()]
}
function c(g, e) {
    var f;
    do {
        f = d.css(g, e);
        if (f != "" && f != "transparent" || d.nodeName(g, "body")) {
            break
        }
        e = "backgroundColor"
    } while (g = g.parentNode);
    return b(f)
}
var a = {
    aqua: [0, 255, 255],
    azure: [240, 255, 255],
    beige: [245, 245, 220],
    black: [0, 0, 0],
    blue: [0, 0, 255],
    brown: [165, 42, 42],
    cyan: [0, 255, 255],
    darkblue: [0, 0, 139],
    darkcyan: [0, 139, 139],
    darkgrey: [169, 169, 169],
    darkgreen: [0, 100, 0],
    darkkhaki: [189, 183, 107],
    darkmagenta: [139, 0, 139],
    darkolivegreen: [85, 107, 47],
    darkorange: [255, 140, 0],
    darkorchid: [153, 50, 204],
    darkred: [139, 0, 0],
    darksalmon: [233, 150, 122],
    darkviolet: [148, 0, 211],
    fuchsia: [255, 0, 255],
    gold: [255, 215, 0],
    green: [0, 128, 0],
    indigo: [75, 0, 130],
    khaki: [240, 230, 140],
    lightblue: [173, 216, 230],
    lightcyan: [224, 255, 255],
    lightgreen: [144, 238, 144],
    lightgrey: [211, 211, 211],
    lightpink: [255, 182, 193],
    lightyellow: [255, 255, 224],
    lime: [0, 255, 0],
    magenta: [255, 0, 255],
    maroon: [128, 0, 0],
    navy: [0, 0, 128],
    olive: [128, 128, 0],
    orange: [255, 165, 0],
    pink: [255, 192, 203],
    purple: [128, 0, 128],
    violet: [128, 0, 128],
    red: [255, 0, 0],
    silver: [192, 192, 192],
    white: [255, 255, 255],
    yellow: [255, 255, 0],
    transparent: [255, 255, 255]
}
})(jQuery); //* external script ends here

$("#square").animate({ "opacity" : "1" }); // v-- original screen
$("p#begin").animate({"opacity" : "1" });

var sqrs = [
    "#sq1",
    "#sq2",
    "#sq3",
    "#sq4"
]
var sqLength = sqrs.length;
var pageInt = 0;

for (i = 0; i < sqLength; i++) {
    $("#form"+[i+1]).hide();
    $(sqrs[i]).hide();
}

function beginScript() {        // function for initial 'square' div
    $("#square").addClass("removeLinkEffect");
    $("p#begin").fadeOut('slow', function() {       // removes 'click here to begin' text 
        $("#begin").remove();       // complete remove
        $(".square").animate({      // transforms initial square
            "height" : "40px"
        },
        1000,
        function() {
            $(".square").animate({
                "width" : "790px"
            },
            1000,
            function() {                                // v-- launches the View screens(divs)
                var loadText = "Loading, Please wait...";
                var pageText = "";

                $("#square").addClass("fontStyle").html(loadText);
                $("#square").animate({
                    "opacity" : "0"
                }, 1000,
                function () {
                    $("#square").remove();      // removes initial square
                });
                for (i = 0; i < sqLength; i++) {        // transforms View divs
                    $(sqrs[i]).show().animate({
                        "position" : "static",
                        "height" : "70px",
                        "marginTop" : "80px",
                        "opacity" : "1"
                    }, 1000);
                    pageText = "View " + [i+1];     // View #
                    $(sqrs[i]).addClass("fontStyle").addClass("addLinkEffect").html(pageText);
                }
            });
        });
    });
}

function fncSq1() {     // function for 'View 1'
    checkOpenDivs();
    $(sqrs[0]).addClass("removeLinkEffect").html("Loading...").promise().done(function() {
        $(sqrs[0]).html(
            "Text 1"
        ).animate({     // launches 'View' window
            "height" : "290px",
            "width" : "790px",
            backgroundColor : "#ffffff",
            color : "black"
        });
        $("#form1").show();
    });
}
function fncSq2() {     // function for 'View 2'
    checkOpenDivs();
    $(sqrs[1]).addClass("removeLinkEffect").html("Loading...").promise().done(function() {
        $(sqrs[1]).html("Text 2").animate({     // launches 'View' window
            "height" : "290px",
            "width" : "790px",
            backgroundColor : "#ffffff",
            color : "black"
        });
        $("#form2").show();
    });
}
function fncSq3() {     // function for 'View 3'
    checkOpenDivs();
    $(sqrs[2]).addClass("removeLinkEffect").html("Loading...").promise().done(function() {
        $(sqrs[2]).html("Text 3").animate({     // launches 'View' window
            "height" : "290px",
            "width" : "790px",
            backgroundColor : "#ffffff",
            color : "black"
        });
        $("#form3").show();
    });
}
function fncSq4() {     // function for 'View 4'
    checkOpenDivs();
    $(sqrs[3]).addClass("removeLinkEffect").html("Loading...").promise().done(function() {
        $(sqrs[3]).html("Text 4").animate({     // launches 'View' window
            "height" : "290px",
            "width" : "790px",
            backgroundColor : "#ffffff",
            color : "black"
        });
        $("#form4").show();
    });
}

function checkOpenDivs() {      // checks for any other divs that have launched previously
    for (i = 0; i < sqLength; i++) {
        $(sqrs[i]).removeClass("removeLinkEffect").html("View " + [i+1]).animate({  // returns 'open' divs to original
            "position" : "static",
            "height" : "70px",
            "width" : "790px",
            "marginTop" : "80px",
            backgroundColor : "#ffaa00",
            color : "white"
        });
        $("#form"+[i+1]).hide();
    }
}

#squarePos {
    position: fixed;
}