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('');
            }
        }
    });
}

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

Answer 1

我认为使用制表符或逗号是用户可能期望允许他们跳过动画的最佳输入。该输入的密钥代码如下：

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

希望这有帮助。

Answer 2

SetTimout-Function返回一个对象。您可以存储此按钮并在按下按钮时使用它来取消超时。

一般例子：

function myFunction() {
  myVar = setTimeout(function() { alert("Hello"); }, 3000);
}

function myStopFunction() {
  clearTimeout(myVar);
}

var myVar;

function myFunction() {
  myVar = setTimeout(function() { alert("Hello"); }, 3000);
}

function myStopFunction() {
  clearTimeout(myVar);
}

<html>
<body>
  <input type="button" onClick="myFunction()" value="start"/>
  <input type="button" onClick="myStopFunction()" value="stop"/>
</body>
</html>

source

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

2 个答案: