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

将事件附加到表单本身而不是文档，然后按beforeSend在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();
});