title: jQuery animation BEFORE form submission not working
body: <p>When I try to add a jQuery <code>click</code> animation to my submit button it starts the animation however, quickly resets because the form submits and refreshes the page. If the form is wrapped by a <code>div</code>, the animation works fine but then the form doesn't submit after the animation is complete. How can I have it submit the form after the animation has completed and keep the animation from reseting after form-submission. I'm new to PHP and jQuery and can't figure out how to do it. Here is what I have so far:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;style type="text/css"&gt;
          body
          {
              background-color: lightgrey;
              height: 100%;
              width: 100%;
              overflow: hidden;
          }
          .PSolCanvas
          {
              transform: translate(-50%, -40%);
              z-index: 1;
              position: absolute;
              left: 50%;
              top: 88.5%;
              background-color: transparent;
              min-height: 100%;
          }
          .PSol
          {
              width: 120px;
              height: 120px;
              margin: 0 auto;
              -webkit-border-radius: 100%;
              -moz-border-radius: 100%;
              border-radius: 100%;
              font: 15px arial;
              color: black;
              border: 1px solid lightgray;
              background: #20AC20;
          }
      &lt;/style&gt;
      &lt;script rel = "javascript" type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type='text/javascript'&gt;
          $(document).ready(function(){
              $(".PSol").click(function() {
                  $(".PSolCanvas, .TSolCanvas").animate({top: "50%"});
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;?php
  $username = "username";
  $password = "password"; 
  $host = "host";
  $db = $username;
  
  if(isset($_POST['PSol']))
  {
      $connection = mysqli_connect($host, $username, $password, $db);
      $sql = "UPDATE table SET column='' WHERE id = 1";
      if (mysqli_query($connection, $sql)) {
          echo "Record successfully changed.";
      }
      else{
          echo "Error: " . $sql . "&lt;br&gt;" . mysqli_error($connection);
      }
      mysqli_close($connection);
      echo "&lt;p&gt;Disconnected from server: ".$host."&lt;/p&gt;";
  }
  ?&gt;
      &lt;form action="&lt;?php echo $_SERVER['PHP_SELF']; ?&gt;" method = "post" class = "PSolCanvas"&gt;
          &lt;input type = "submit" name = "PSol" class = "PSol" value = "P"/&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>