javascript - jQuery 通过单击按钮从网站中删除所有 js

Question

我的网站出现问题 concept studio在该页面中，我的表单上有打字动画，我需要在页面中添加一些按钮来跳过动画，但我不知道该怎么做。

function doTypeAnimation() {
    if ($(".hello-form").length === 0) return false;
    function condition(functionName) {
        if (functionName === 0) {
            return false;
        } else if (functionName == 1) {
            finish();
        } else if (functionName == 2) {
            runSecond();
        } else if (functionName == 2.1) {
            runSecondOther();
        } else if (functionName == 3) {
            runThird();
        } else if (functionName == 4) {
            runFourth();
        } else if (functionName == 5) {
            runFifth();
        } else if (functionName == 6) {
            runSixth();
        } else if (functionName == 7) {
            runSeventh();
        } else if (functionName == 8) {
            runEighth();
        } else if (functionName == 8.1) {
            runEighthOne();
        } else if (functionName == 8.2) {
            runEighthTwo();
        } else if (functionName == 9) {
            runNinth();
        } else if (functionName == 10) {
            runTenth();
        }
    }

    var anim = {
        label: function(name, dataSelector, datAttribute, selector, functionName) {
            var lname = $(dataSelector).attr(datAttribute);
            $.each(lname.split(''), function(i, letter) {
                setTimeout(function() {
                    $(selector).html($(selector).html() + letter);
                    if (++i === lname.length) {
                        condition(functionName);
                    }
                }, 500 * i);
            });
        },
        input: function(name, dataSelector, datAttribute, selector, functionName) {
            var iname = $(dataSelector).attr(datAttribute);
            $(selector).show();
            $(selector).attr('placeholder', '');
            $.each(iname.split(''), function(i, letter) {
                setTimeout(function() {
                    var item = $(selector).attr("placeholder");
                    $(selector).attr("placeholder", item + letter);

                    if (++i === iname.length) {
                        condition(functionName);
                    }
                }, 80 * i);
            });
        }
    };

    if ($(".start-project").length > 0) {
        anim.label("title", ".form-title", "data-title", ".form-title", 2.1);
    } else {
        anim.label("title", ".form-title", "data-title", ".form-title", 2);
    }

    function runSecondOther() {
        $(".form-title").after("<br>");
        anim.label("title1", ".form-title1", "data-title", ".form-title1", 2);
    }

    function runSecond() {
        if ($(".start-project").length > 0) {
            $(".form-title1").after("<br>");
        } else {
            $(".form-title").after("<br>");
        }
        $(".form-name").css("display", "inline-block");
        anim.label("fname", ".form-name", "data-name", ".form-name .nname", 3);
    }

    function runThird() {
        anim.label("finame", ".form-name", "data-iname", ".form-name .name", 4);
    }

    function runFourth() {
        $(".form-name .name").addClass("placeholder");
        anim.label("fcname", ".form-name", "data-company", ".form-name .cname", 5);
    }

    function runFifth() {
        if ($(".start-project").length > 0) {
            anim.label("fciname", ".form-name", "data-cmpany-name", ".form-name .company", 8);
        } else {
            anim.label("fciname", ".form-name", "data-cmpany-name", ".form-name .company", 6);
        }
    }

    function runSixth() {
        if ($(".start-project").length > 0) {
            $(".form-mail span").addClass("placeholder");
            $(".form-mail .dot").show();
            $(".form-mail").after("<p style='display: block'><br></p>");
            $(".form-textarea").css("display", "inline-block");
            anim.label("ftname", ".form-textarea", "data-text", ".form-textarea label", 7);
        } else {
            $(".form-name .company").addClass("placeholder");
            $(".form-name .dot").show();
            $(".form-name").after("<br>");
            $(".form-textarea").css("display", "inline-block");
            anim.label("ftname", ".form-textarea", "data-text", ".form-textarea label", 7);
        }
    }

    function runSeventh() {
        if ($(".start-project").length > 0) {
            anim.label("fTextareaName", ".form-textarea", "data-name", ".form-textarea .span", 10);
        } else {
            anim.label("fTextareaName", ".form-textarea", "data-name", ".form-textarea .span", 8);
        }
    }

    function runEighth() {
        if ($(".start-project").length > 0) {
            $(".form-name .company").addClass("placeholder");
            $(".form-name .dot").show();
            $(".form-name").after("<br>");
            $(".form-mail").css("display", "inline-block");
            anim.label("formMailN", ".form-mail", "data-text", ".form-mail .text", 8.1);
        } else {
            $(".form-textarea span").addClass("placeholder");
            $(".form-textarea .dot").show();
            $(".form-textarea").after("<p style='display: block'><br></p>");
            $(".form-mail").css("display", "inline-block");
            anim.label("formMailN", ".form-mail", "data-text", ".form-mail label", 9);
        }
    }

    function runEighthOne() {
        anim.label("formPhoneI", ".form-mail", "data-phone", ".form-mail .phone", 8.2);
    }

    function runEighthTwo() {
        $(".form-mail .phone").addClass("placeholder");
        anim.label("formOr", ".form-mail", "data-or", ".form-mail .or", 9);
    }

    function runNinth() {
        if ($(".start-project").length > 0) {
            anim.label("formMailI", ".form-mail", "data-name", ".form-mail .span", 6);
        } else {
            anim.label("formMailI", ".form-mail", "data-name", ".form-mail .span", 10);
        }
    }

    function runTenth() {
        if ($(".start-project").length > 0) {
            $(".form-textarea span").addClass("placeholder");
            $(".form-textarea .dot").show();
            $(".form-textarea").after("<p style='display: block'><br></p>");
            $(".thanks").css("display", "inline-block");
            anim.label("thanks", ".thanks", "data-text", ".thanks", 1);
        } else {
            $(".form-mail .span").addClass("placeholder");
            $(".form-mail .dot").show();
            $(".form-mail").after("<p style='display: block'><br></p>");
            $(".thanks").css("display", "inline-block");
            anim.label("thanks", ".thanks", "data-text", ".thanks", 1);
        }
    }

    function finish() {
        $(".typed-cursor").hide();
        $(".overlay").hide();
        $(".form-group input, .form-group textarea").val("");
    }

    $(".hello-form form span").focusout(function() {
        var text = $(this).text();

        $(this).next("span").find("input, textarea").val(text);
    });

    $(".hello-form form span").click(function() {
        var text = $(this).text();
        var placeholder = $(this).attr("data-placeholder");

        if (text == placeholder) {
            $(this).text('');
        }

        $("html, body").stop(true, true).animate({
            scrollTop: $(this).position().top - 10
        });
    });

    $(".hello-form").on('keyup', 'span', function(e) {
        var keyCode = e.keyCode || e.which;
        if (keyCode == 9) {
            var text = $(this).text();
            var placeholder = $(this).attr("data-placeholder");

            if (text == placeholder) {
                $(this).text('');
            }
        }
    });
}

此函数执行页面上的所有动画，您可以在给定的网址上查看动画示例。

Answer 1

我认为使用制表符或逗号是用户希望跳过动画的最佳输入。该输入的关键代码如下:

$("#textinput").keydown(function(e) {
    e.keyCode; // this value 9 for tab 188 for comma
});

希望这有帮助。