如何在动画完成之前停止提交表单

Question

我试图在用户单击提交按钮之后和提交之前在表单上运行动画。我确实在 stackoverflow 和其他网站上找到了解决方案，但它们要么导致表单在动画运行之前提交，要么动画会运行但表单不会提交。这只是为了我姐姐的婚礼网站，所以我的工作不会受到威胁，但让她的网站与众不同会很好。

请注意，开发者控制台不会返回任何错误。

这是我们开始使用的代码：Executing a form after animation is done JQuery。这是一个公认的答案，所以我假设它对某人有用，但我不明白当没有任何事件将事件传递给它时，preventDefault 函数应该如何工作。我也试过这个：Run an animation before I submit a form (and make sure it completes)

基本上，动画是一个滑入信封的信，信封折叠然后滑出屏幕。

这是表格。

<form method="post" action="index.php">
    <label>names</label>
    <input type="text" name="names" id="nameInput" placeholder="type here" />
    <label>food allergies</label>
    <input type="text" name="allergies" placeholder="type here" />
    <input type="submit" name="send" value="Send Email">
</form>

这里是 jQuery。 使用@Roamer-1888 的代码更新

var windowWidth = $(window).width();

var imgPosition = ($('.mobile_background').width() - windowWidth) / 2;
var centreTriangle = (windowWidth / 2) - 35;

function sendMail(e) {
    e.preventDefault();
    var form = e.target;

    var setTop = function () {
        return $('.letter').animate({top: 2}, 1000).promise();
    }
    var openEnvelope = function () {
        return $('.envelope_fold.top_up').slideUp().promise();
    }
    var insertContents = function () {
        return $('input').css('display', 'none');
        // you probably need also to do something here to prevent the inputs from showing again when the envelope is animated off screen. eg append the inputs to the envelope element. 
    }
    var closeEnvelope = function () {
        return        $('.envelope_fold.shaddow').add('.envelope_fold.top_down').slideDown(300).promise();
    }
    var sealEnvelope = function () {
        return $('#seal').css('display', 'block');
    }
    var exitStageRight = function () {
        return $('#envelope').animate({left: 3000}).promise();
    }
    var send = function () {
        form.submit();
    }

    if ($('#nameInput').val() == "") {
        alert('Please tell us your name');
    } else {
        $.when() //resolved promise to get the chain started
            .then(setTop)
            .then(openEnvelope)
            .then(insertContents)
            .then(closeEnvelope)
            .then(sealEnvelope)
            .then(exitStageRight)
            .then(send);
    }
}


function showMenu() {
    $('.navButton').css({
        right: '111px'
    });
    $('#menu').css({
        left: 0
    }, 300);
}

function hideMenu() {
    $('.navButton').css({
        right: '10px'
    }); 
    $('#menu').css({
        left: '100%'
    }, 300);
}

$(document).ready(function(){
    // styles
    $('#intro').css({
        'height': $(window).height()
    });

    $('.mobile_background').css({
        'right': -imgPosition
    });

    $('.triangle').css({
        'margin-left': centreTriangle
    });

    // countdown clock
    $('#count').countdown('2015/01/17 13:30:00', function(event) {
       $(this).html(event.strftime('<h3>%D<span>d</span> %H<span>h</span> %M<span>m</span</h3>'));
    });

    // form submit verification removal
    $('.success a').click(function(){
        $(this).parent().remove();
    });

    // Navigation
    $('.navButton').on('click', function(){
        showMenu();
    });

    $('body > div, #menu a').on('click', hideMenu);


    if (windowWidth > 1025) {
        $('nav').mouseenter(function(){
            showMenu();
        });
        $('nav').mouseleave(function(){
            hideMenu();
        });     
    }

    if (windowWidth <= 400) {
        $('.navButton').on('click', function(){
            showMenu();
            $('body > div').css({
                right: '101px'
            });
        });

        $('body > div + div, #menu a').on('click', function(){
            hideMenu();
            $('body > div').css({
                right: 0
            });
        });
    }

    // fire form animation
    $("form:eq(0)").on('submit', sendMail);
});

此外，我希望动画的第一步是让输入位于信封前面的后面，但它会阻止在此之后运行的所有函数工作。我必须首先将它们放在信封前，否则用户将无法输入文本。所以如果有人能弄清楚那也很棒。

滚动到本站底部查看表格：http://celinaanddavid.ca

感谢您的帮助。

Answer 1

对于像这样的串行动画，您可以通过利用 jQuery 的承诺并编写一个友好的.then() 链来避免可怕的“末日金字塔”（深层嵌套回调）。

为了使代码更具可读性，将每个动画步骤编写为命名函数也是一个好主意。

你最终会得到这样的结果：

function sendMail(e) {
    e.preventDefault();
    var form = e.target;

    var setTop = function () {
        return $('.letter').animate({top: 2}, 1000).promise();
    }
    var openEnvelope = function () {
        return $('.envelope_fold.top_up').slideUp().promise();
    }
    var insertContents = function () {
        return $(form).find('input').css('z-index', 0);
        // you probably need also to do something here to prevent the inputs from showing again when the envelope is animated off screen. eg append the inputs to the envelope element. 
    }
    var closeEnvelope = function () {
        return $('.envelope_fold.shaddow').add('.envelope_fold.top_down').slideDown(300).promise();
    }
    var sealEnvelope = function () {
        return $('#seal').css('display', 'block');
    }
    var exitStageRight = function () {
        return $('#envelope').animate({left: 3000}).promise();
    }
    var send = function () {
        form.submit();
    }

    if ($('#nameInput').val() == "") {
        alert('Please tell us your name');
    } else {
        $.when() //resolved promise to get the chain started
            .then(setTop)
            .then(openEnvelope)
            .then(insertContents)
            .then(closeEnvelope)
            .then(sealEnvelope)
            .then(exitStageRight)
            .then(send);
    }
}

现在您需要做的就是附加sendMail 作为表单的 sumbit 处理程序，例如：

$("form:eq(0)").on('submit', sendMail);