Jquery animation isn't waiting until it finishes

Question

I have this function in my website:

$(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;

});

What I'm trying to do is that when the user clicks on the submit button, I animate a little car to the left, and after that I submit the form. (Yes, this is homework). But what is happening is that the form is being sent before the animation finishes.. What is the problem?

EDIT: changed to:

$("#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;
});

But now nothing happens and the form is just sent

EDIT 2: This is the html for the table:

<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>

and I have another jquery function for the field checking:

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

Answer 1

I can clearly see two issues in your code, the first is that you should write your animation with a callback function to handle some stuff after the animation is complete. This can be done with the complete option of the animate() function. The second point to notice is that you may change padding-left to paddingLeft as this solved the case for me multiple times:

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

Answer 2

Attach the event to the form itself, instead of the document, and use the beforeSend in AJAX as such, and there's no 'fail' - that's supposed to be 'error'.

$("#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 3

One thing I see wrong is that the data value is set to #contactform, not .contactform. Other than that, maybe your table cell doesn't allow more padding or the padding is not pronounced enough to notice.

Here's a jsfiddle with a more pronounced version of padding-left.