Jquery 动画不会等到它完成

Question

我的网站有这个功能：

$(document).on('submit','form.contactform',function(){
$(".contactTable tr:last-child td:first-child").animate({
    'padding-left' : 5
}, 2000, function(){
    var url = "contactSubmit.php"; // the script where you handle the form input.
    $.ajax({
        type: "POST",
        url: url,
        data: $("#contactform").serialize(), // serializes the form's elements.
        success: function()
        {
            //window.location = 'index.php?send='.'succ'; // show response from the php script.
        },
       fail: function()
       {
           alert("An error has ocurred! :O");
       }
    });
});
return false;

});

我想要做的是，当用户点击提交按钮时，我会为左边的一辆小汽车制作动画，然后提交表单。 （是的，这是家庭作业）。 但是正在发生的事情是在动画完成之前发送表单.. 有什么问题？

编辑： 改为：

$("#contactform").submit( function() {
    var url = "contactSubmit.php"; // the script where you handle the form input.
    $.ajax({
        type: "POST",
        url: url,
        beforeSend:  $(".contactTable tr:last-child td:first-child").animate({'padding-left' : 5}, 2000),
        data: $("#contactform").serialize(), // serializes the form's elements.
        success: function()
        {
            window.location = 'index.php?send='.'succ'; // show response from the php script.
        },
       error: function()
       {
           alert("An error has ocurred! :O");
       }
    });
    return false;
});

但是现在什么都没有发生，只是发送了表单

编辑 2： 这是表格的 html：

<form id= "contactform" class="contactform" method="post" action="contactSubmit.php">
    <table class="contactTable">
        <tr><td>Name</td> <td><input class="inputField" placeholder="John Doe" type="text" name="name" required></td></tr>
        <tr><td>Email</td><td><input class="inputField" type="text" placeholder="example@example.com" 
                   title="Please enter a valid email." name="email" pattern="[a-zA-Z]+@[a-zA-Z]+.[a-zA-Z]+(.[a-zA-Z]+)?">
                        </td></tr>

        <tr><td>Topic</td> <td>  <select class="inputField" name="topic">
                <option value="great">Compliment!</option>
                <option value="good">Neutral</option>
                <option value="bad">Bad!</option>
                <option value="other">What?</option>
        </select></td></tr>
        <tr><td>Car</td> <td> <select class="inputField" name="car">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="fiat">Fiat</option>
                <option value="audi">Audi</option>
                </select></td></tr>
        <tr><td>Message</td><td><textarea class="inputField" name="msg" 
                                          placeholder="Your message here." required></textarea></td></tr>
        <tr><td><img src="resources/littleCar.png" alt="Little Car" class="littlecar"></td>
            <td><input type="submit" class="submitButton" value="Submit"></td>
        </tr>
    </table>
</form>

我还有另一个用于字段检查的 jquery 函数：

$(document).ready(function () {
    $('form').h5Validate();
});

Answer 1

将事件附加到表单本身，而不是文档，并在 AJAX 中使用 beforeSend 这样，并且没有“失败” - 这应该是“错误”。

$("#contactform").submit( function(e) 
{
  e.preventDefault(); // prevent default behavior
  var url = "contactSubmit.php"; // the script where you handle the form input.
  $.ajax({
    type: "POST",
    url: url,
    beforeSend: /* animation here */, 
    data: $("#contactform").serialize(), // serializes the form's elements.
    success: function()
    {
      //window.location = 'index.php?send='.'succ'; // show response from the php script.
    },
    error: function()
    {
      alert("An error has ocurred! :O");
    }
  });
});

Answer 2

我看到错误的一件事是data 值设置为#contactform，而不是.contactform。除此之外，可能您的表格单元格不允许更多的填充或填充的发音不够明显。

这是一个jsfiddle，它带有更明显的padding-left。

Answer 3

我可以清楚地看到您的代码中有两个问题，第一个是您应该使用回调函数编写动画以在动画完成后处理一些事情。这可以通过animate() 函数的complete 选项来完成。 要注意的第二点是您可以将padding-left 更改为paddingLeft，因为这多次解决了我的问题：

$(document).on('submit','form.contactform',function(e){
  $(".contactTable tr:last-child td:first-child").animate({
    paddingLeft: "+=5",
    duration: 2000,
    complete: function()
    {
      var url = "contactSubmit.php"; // the script where you handle the form input.
      $.ajax({
        type: "POST",
        url: url,
        data: $("#contactform").serialize(), // serializes the form's elements.
        success: function()
        {
          //window.location = 'index.php?send='.'succ'; // show response from the php script.
        },
        fail: function()
        {
          alert("An error has ocurred! :O");
        }
      });
    }
  });
  e.preventDefault();
});