Redirecting to PHP despite preventDefault in AJAX

Question

I know there is at least 30+ posts for a similar 'issue' and I've been through most of them. Including this one, this one, and ones like this one (I don't want to link more because majority of them are same and I don't want to spam. Links also seemed to have broken.

index.html

  <form method="POST" name="contactform" action="contact-form.php" id="myForm"> 
    <div>
      <label for="email">Your best email address:</label>
      <input type="email" name="email" id="name" placeholder="" class="emailSubject"/>
    </div>
    <div>
     <button id="send" type="submit">SUBMIT <i class="fa fa-paper-plane"></i></button>
    </div>
  </form>

contact-form.php

<?php
$replyto =  $_POST["email"];
$sendto = 'contact@mydomain.com';
$headers = "From: Contact Form <contact@mydomain.com>";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$subject = $replyto .' is curious about more' .$replyto .'information!';
$body = "Please let me know once advancement is made on your company!";
mail($sendto, $subject ,$body, $headers);
echo 'Mail sent.'; 
?>

index.js

$('#myForm').on('submit', function(e) {
  e.preventDefault();
    $.post('contact-form.php', $(this).serialize(), function (data) {

        // This is executed when the call to mail.php was succesful.
        // 'data' contains the response from the request
    return false;
    })



      $(this).addClass('animated fadeOutRight'); $('.box form').addClass('animated fadeOut');
         $(this, '.box form').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd  oanimationend animationend', function() {
            $(this).hide();
            $('.box form').hide();
            $('.thanks').show().addClass('animated zoomIn');
            $('.box').height('auto');
         });
    });

This JS file I have modified a lot for the last 3 hours trying to figure out why preventDefault isn't triggering. Originally it was based off of the 'click' of the submit button.

By changing the order of the JS file, and triggering the animations BEFORE the AJAX, I was able to get both the transition AND the PHP to happen - However, data wasn't transferring to the PHP. So my email was coming through without the users email.

Any insight would be great - (The JS has both preventDefault() AND return false ATM as per one of the more recent suggestions.) I'm unsure how to proceed from here. Despite there being a lot of similar posts 'preventDefault' seemed to have fix all of their issues.

UPDATE

After testing with more console.log() and modifying the JS a lot I ended up copying it back to the original from THIS post.

index.html

  <form method="POST" name="contactform" action="contact-form.php" id="myForm"> 
    <div>
      <label for="email">Your best email address:</label>
      <input type="email" name="email" id="name" placeholder="" class="emailSubject"/>
    </div>
    <div>
     <button id="send" type="submit">SUBMIT <i class="fa fa-paper-plane"></i></button>
    </div>
  </form>

index.js

$('#myForm').on('submit', function(e) {
  e.preventDefault();
    $.post('contact-form.php', $(this).serialize(), function (data) {

        // This is executed when the call to mail.php was succesful.
        // 'data' contains the response from the request
    return false;
    })



      $(this).addClass('animated fadeOutRight'); $('.box form').addClass('animated fadeOut');
         $(this, '.box form').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd  oanimationend animationend', function() {
            $(this).hide();
            $('.box form').hide();
            $('.thanks').show().addClass('animated zoomIn');
            $('.box').height('auto');
         });
    });

I don't see anything different from the two samples (Which makes sense because I copied from here.) Can anyone suggest why before it was re-directing (I had numerous other people try also, same result). Possibly due to server caching, but is that normal?

1: jQuery preventDefault() not working inside AJAX call 1st SO Article