Jquery 动画不会等到它完成

Posted 2023-03-22

【中文标题】Jquery 动画不会等到它完成

【英文标题】：Jquery animation isn't waiting until it finishes

【发布时间】：2014-07-21 01:38:36

【问题描述】：

我的网站有这个功能：

$(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="[e-mail]" 
                   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"  class="littlecar"></td>
            <td><input type="submit" class="submitButton" value="Submit"></td>
        </tr>
    </table>
</form>

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

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

【参考方案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");
    
  );
);

【讨论】：

你的意思是改变这一行： $(document).on('submit','form.contactform',function() 与： $("#contactform").submit( function() ? 现在它根本不做动画了..

抱歉，更新了答案。在 ajax 调用中使用 beforeSend。

编辑了我的问题.. 仍然在发送表单并且没有显示动画..

再次编辑答案以添加防止表单的默认行为。请注意，提交函数现在有一个代表事件本身的“e”参数。请尝试一下。

我试过了..但表单仍在发送，甚至没有调用函数..（我首先在函数中插入了一个警报，它没有被触发..）

【参考方案2】：

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

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

【参考方案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();
);